@jant/core 0.6.14 → 0.6.16

package/src/styles/ui.css

@@ -30,6 +30,134 @@
     counter-reset: sidenote-counter;
   }
 
+  /* Authenticated utility chrome lives outside .site-page so the previewed
+     theme layout remains the same subtree visitors receive after publishing. */
+  .draft-preview-bar {
+    position: sticky;
+    top: 0;
+    z-index: 40;
+    width: 100%;
+    border-bottom: 1px solid
+      color-mix(in srgb, var(--site-divider) 78%, transparent);
+    background: color-mix(
+      in srgb,
+      var(--site-elevated-bg) 94%,
+      var(--site-nav-hover-bg)
+    );
+    color: var(--site-text-secondary);
+    font-family: var(--font-ui);
+    box-shadow: 0 1px 0
+      color-mix(in srgb, var(--site-elevated-bg) 70%, transparent);
+    backdrop-filter: blur(14px);
+    -webkit-backdrop-filter: blur(14px);
+  }
+
+  .draft-preview-bar-inner {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 0.7rem;
+    min-height: 2.5rem;
+    max-width: var(--layout-body-max-width);
+    margin: 0 auto;
+    padding: 0.45rem var(--site-padding);
+    font-size: var(--type-ui-caption);
+    line-height: 1.35;
+    text-align: center;
+  }
+
+  .draft-preview-bar-copy {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.7rem;
+    min-width: 0;
+  }
+
+  .draft-preview-bar-label {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.42rem;
+    flex: none;
+    color: var(--site-text-primary);
+    font-weight: var(--fw-semibold);
+    letter-spacing: var(--type-label-tracking);
+    text-transform: uppercase;
+  }
+
+  .draft-preview-bar-dot {
+    width: 0.42rem;
+    height: 0.42rem;
+    border-radius: 999px;
+    background: var(--site-accent);
+    box-shadow: 0 0 0 3px
+      color-mix(in srgb, var(--site-accent) 12%, transparent);
+  }
+
+  .draft-preview-bar-description {
+    color: var(--site-text-secondary);
+  }
+
+  .draft-preview-bar-action {
+    display: inline-flex;
+    flex: none;
+    align-items: center;
+    justify-content: center;
+    min-height: 1.9rem;
+    padding: 0.28rem 0.72rem;
+    border: 1px solid
+      color-mix(in srgb, var(--site-text-primary) 18%, transparent);
+    border-radius: 999px;
+    background: color-mix(
+      in srgb,
+      var(--site-elevated-bg) 78%,
+      var(--site-nav-hover-bg)
+    );
+    color: var(--site-text-primary);
+    font-size: var(--type-ui-caption);
+    font-weight: var(--fw-medium);
+    line-height: 1;
+    text-decoration: none;
+    cursor: pointer;
+    transition:
+      border-color 150ms ease,
+      background-color 150ms ease,
+      color 150ms ease,
+      transform 150ms ease;
+  }
+
+  .draft-preview-bar-action:hover {
+    border-color: color-mix(
+      in srgb,
+      var(--site-accent) 48%,
+      var(--site-divider)
+    );
+    background: var(--site-nav-hover-bg);
+    color: var(--site-accent);
+  }
+
+  .draft-preview-bar-action:active {
+    transform: translateY(1px);
+  }
+
+  .draft-preview-bar-action:focus-visible {
+    outline: 2px solid var(--site-accent);
+    outline-offset: 2px;
+  }
+
+  @media (max-width: 480px) {
+    .draft-preview-bar-inner {
+      align-items: center;
+      gap: 0.65rem;
+      text-align: left;
+    }
+
+    .draft-preview-bar-copy {
+      flex-direction: column;
+      align-items: flex-start;
+      gap: 0.12rem;
+    }
+  }
+
   /*
    * Tufte horizontal frame — single source of truth for left/right positioning.
    * Every page-level section gets the same asymmetric padding.
@@ -1127,6 +1255,148 @@
     align-items: center;
   }
 
+  .collection-created-notice {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 0.4rem 0.7rem;
+    width: fit-content;
+    max-width: 100%;
+    min-height: 2rem;
+    margin-bottom: 0.7rem;
+    padding: 0.35rem 0.45rem 0.35rem 0.65rem;
+    border-radius: 0.55rem;
+    background: color-mix(in srgb, var(--site-accent) 5%, var(--site-page-bg));
+    box-shadow: inset 2px 0 0
+      color-mix(in srgb, var(--site-accent) 30%, transparent);
+  }
+
+  .collection-created-notice-message {
+    margin: 0;
+    color: color-mix(
+      in srgb,
+      var(--site-text-secondary) 82%,
+      var(--site-text-primary)
+    );
+    font-family: var(--font-ui);
+    font-size: var(--type-sm);
+    line-height: 1.35;
+  }
+
+  @keyframes collection-created-notice-enter {
+    from {
+      opacity: 0;
+      transform: translateY(0.25rem);
+    }
+
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  @keyframes collection-created-notice-attention {
+    from {
+      background: color-mix(
+        in srgb,
+        var(--site-accent) 11%,
+        var(--site-page-bg)
+      );
+      box-shadow: inset 2px 0 0
+        color-mix(in srgb, var(--site-accent) 52%, transparent);
+    }
+
+    to {
+      background: color-mix(
+        in srgb,
+        var(--site-accent) 5%,
+        var(--site-page-bg)
+      );
+      box-shadow: inset 2px 0 0
+        color-mix(in srgb, var(--site-accent) 30%, transparent);
+    }
+  }
+
+  @media (prefers-reduced-motion: no-preference) {
+    .collection-created-notice {
+      animation:
+        collection-created-notice-enter 360ms cubic-bezier(0.22, 1, 0.36, 1)
+          both,
+        collection-created-notice-attention 1.8s 120ms ease-out both;
+    }
+  }
+
+  .collection-created-notice-actions {
+    display: flex;
+    align-items: center;
+    flex: 0 0 auto;
+    gap: 0.35rem;
+  }
+
+  .collection-created-notice-action {
+    appearance: none;
+    display: inline-flex;
+    align-items: center;
+    min-height: 2rem;
+    padding: 0.2rem 0;
+    border: 0;
+    background: transparent;
+    font-family: var(--font-ui);
+    font-size: var(--type-sm);
+    line-height: 1.35;
+    text-decoration: none;
+    text-underline-offset: 0.22em;
+    cursor: pointer;
+  }
+
+  .collection-created-notice-action-primary {
+    color: var(--site-text-primary);
+    font-weight: var(--fw-medium);
+  }
+
+  .collection-created-notice-action-primary:hover {
+    color: var(--site-text-primary);
+    text-decoration: underline;
+  }
+
+  .collection-created-notice-action:focus-visible {
+    outline: 2px solid color-mix(in srgb, var(--site-accent) 28%, transparent);
+    outline-offset: 3px;
+    border-radius: var(--radius-sm, 0.25rem);
+  }
+
+  .collection-created-notice-action:disabled {
+    opacity: 0.5;
+    cursor: wait;
+  }
+
+  .collection-created-notice-dismiss {
+    appearance: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 1.75rem;
+    height: 1.75rem;
+    padding: 0;
+    border: 0;
+    border-radius: 999px;
+    background: transparent;
+    color: var(--site-text-secondary);
+    opacity: 0.65;
+    cursor: pointer;
+  }
+
+  .collection-created-notice-dismiss:hover {
+    background: color-mix(in srgb, var(--site-accent) 6%, transparent);
+    color: var(--site-text-primary);
+    opacity: 1;
+  }
+
+  .collection-created-notice-dismiss:focus-visible {
+    outline: 2px solid color-mix(in srgb, var(--site-accent) 28%, transparent);
+    outline-offset: 2px;
+  }
+
   .collections-page-actions {
     display: flex;
     align-items: center;
@@ -1440,6 +1710,15 @@
     position: absolute;
     top: 0.7rem;
     right: 0;
+    opacity: 0;
+    pointer-events: none;
+  }
+
+  .collection-directory-managed-row:hover .collection-directory-item-menu,
+  .collection-directory-managed-row:focus-within
+    .collection-directory-item-menu {
+    opacity: 1;
+    pointer-events: auto;
   }
 
   .collections-link-create,
@@ -2080,6 +2359,13 @@
     }
   }
 
+  @media (hover: none) {
+    .collection-directory-item-menu {
+      opacity: 1;
+      pointer-events: auto;
+    }
+  }
+
   /* =========================================================================
    * Timeline & Post Components
    * ========================================================================= */
@@ -2285,7 +2571,7 @@
   .post-header-meta-link {
     color: var(--site-text-secondary);
     font-family: var(--font-ui);
-    font-size: var(--type-ui-meta);
+    font-size: var(--type-ui-hint);
     text-decoration: none;
     white-space: nowrap;
   }
@@ -2332,19 +2618,13 @@
   [data-page="post"] .feed-quote-attribution,
   [data-page="post"] .post-header-meta-row,
   [data-page="post"] .post-header-meta-link,
-  [data-page="post"] .post-header-meta-link time,
-  [data-page="post"] [data-post-meta],
-  [data-page="post"] [data-post-meta] .post-footer-meta,
-  [data-page="post"] [data-post-meta] a,
-  [data-page="post"] [data-post-meta] time {
+  [data-page="post"] .post-header-meta-link time {
     color: var(--site-reading-meta);
   }
 
   [data-page="post"] .feed-link-domain:hover,
   [data-page="post"] .feed-quote-source:hover,
-  [data-page="post"] .post-header-meta-link:hover,
-  [data-page="post"] [data-post-meta] a:hover,
-  [data-page="post"] [data-post-meta] .post-footer-external-link:hover {
+  [data-page="post"] .post-header-meta-link:hover {
     color: var(--site-reading-body);
   }
 
@@ -2356,35 +2636,33 @@
     );
   }
 
-  /* --- Sidenotes (Tufte-style margin notes) ------------------------------ */
+  /* --- Semantic footnotes with Tufte presentation ------------------------ */
 
-  .sidenote,
-  .marginnote {
-    /* Layout: float into the right margin. A floated note anchors to its containing
-       block's right *content* edge, so if a theme gives that block inline-end padding
-       (e.g. a padded blockquote card) the anchor is inset and the note drifts left.
-       Themes expose that inset via --sidenote-anchor-inset (default 0) — best derived
-       from the same token that sets the padding — so the note still reaches the gutter
-       no matter how the container is indented. Core's own blocks add no inset. */
-    float: right;
-    clear: right;
-    margin-right: calc(
-      var(--layout-sidenote-margin) - var(--sidenote-anchor-inset, 0px)
-    );
-    width: var(--layout-sidenote-width);
-    margin-top: 0.3rem;
-    /* Breathing room so multiple notes from one paragraph don't touch when they stack. */
-    margin-bottom: 1.4rem;
-    vertical-align: baseline;
-    position: relative;
+  /* The published DOM stays semantic and readable without CSS: body blocks
+     come first, followed by doc-endnotes containing one native ordered list.
+     Detail and timeline posts use their real container width to opt into the
+     Tufte rail; narrow containers, print, feeds, and readers retain endnote
+     order. */
+  [data-post-view],
+  [data-timeline-item] {
+    container: post-view / inline-size;
+  }
 
-    /* Typographic isolation. A footnote is an annotation, not part of the text it
-       hangs off of, so it must render identically no matter what its reference sits
-       inside. The body span is emitted at the reference position (see tiptap-render
-       renderSidenoteReference), so when the [^n] is inside a blockquote / bold run /
-       heading the span inherits that context. Pin every inheritable type property to
-       the canonical note look to cut every such leak — not just the blockquote
-       serif+italic case. */
+  .footnote-endnotes {
+    margin-block: 1.5rem 0;
+    padding-block-start: 0.85rem;
+    border-block-start: 1px solid var(--site-divider);
+  }
+
+  .footnote-list {
+    margin-block: 0;
+    padding-inline-start: 1.5rem;
+  }
+
+  .footnote {
+    scroll-margin-block-start: 2rem;
+    padding-inline-start: 0.15rem;
+    overflow-wrap: anywhere;
     font-family: var(--font-body);
     font-size: var(--type-sm);
     font-style: normal;
@@ -2393,37 +2671,158 @@
     line-height: 1.3;
     letter-spacing: var(--type-body-tracking, normal);
     text-align: left;
-    color: var(--site-reading-meta);
+    color: var(--site-footnote-text);
   }
 
-  .sidenote-number {
-    counter-increment: sidenote-counter;
+  .footnote::marker {
+    color: inherit;
+    font-size: var(--type-xs);
+    font-variant-numeric: tabular-nums;
   }
 
-  .sidenote-number::after,
-  .sidenote::before {
-    position: relative;
-    vertical-align: baseline;
+  .footnote:target {
+    border-radius: var(--radius-sm, 0.25rem);
+    background: color-mix(in srgb, var(--site-reading-meta) 8%, transparent);
   }
 
-  .sidenote-number::after {
-    content: counter(sidenote-counter);
-    font-size: var(--type-code);
-    top: -0.5rem;
-    /* Real margins (not `left`, which reserves no space) so the superscript
-       number keeps a gap from the words on both sides — matters for CJK, which
-       has no inter-word spacing. */
-    margin-left: 0.1rem;
-    margin-right: 0.25rem;
+  .footnote > :first-child {
+    margin-block-start: 0;
   }
 
-  .sidenote::before {
-    content: counter(sidenote-counter) " ";
-    font-size: var(--type-xs);
+  .footnote > :last-child {
+    margin-block-end: 0;
+  }
+
+  .footnote code {
+    font-size: var(--type-code);
+  }
+
+  .footnote-backlinks {
+    display: inline-flex;
+    flex-wrap: wrap;
+    align-items: baseline;
+    gap: 0.35rem;
+    font-size: var(--type-xs);
+  }
+
+  span.footnote-backlinks {
+    margin-inline-start: 0.35rem;
+    vertical-align: baseline;
+  }
+
+  p.footnote-backlinks {
+    display: flex;
+    margin-block: 0.45rem 0;
+  }
+
+  .footnote + .footnote {
+    margin-block-start: 0.75rem;
+  }
+
+  .footnote-backref,
+  .footnote-ref > a {
+    color: inherit;
+    text-decoration: none;
+  }
+
+  .footnote-backref:hover,
+  .footnote-ref > a:hover {
+    text-decoration: underline;
+  }
+
+  .footnote-backref:focus-visible,
+  .footnote-ref > a:focus-visible {
+    border-radius: var(--radius-sm, 0.25rem);
+    outline: 1px solid currentColor;
+    outline-offset: 2px;
+  }
+
+  .footnote-ref {
+    --site-prose-link-color: var(--site-footnote-marker);
+    --site-prose-link-hover: var(--site-footnote-marker);
+    --site-prose-link-underline: transparent;
+
+    margin-inline: 0.25rem;
+    vertical-align: super;
+    line-height: 0;
+    font-size: var(--type-footnote-ref);
+    font-variant-numeric: tabular-nums;
+    white-space: nowrap;
+    color: var(--site-footnote-marker);
+  }
+
+  /* --- Legacy v1 sidenotes ----------------------------------------------- */
+
+  /* Kept for one compatibility window so imported snapshots or cached HTML
+     from an older runtime remain readable during rollout. Product reads render
+     stale post projections as v3 before the database rebuild runs. */
+
+  .sidenote:not([role="doc-footnote"]),
+  .marginnote {
+    /* Layout: float into the right margin. A floated note anchors to its containing
+       block's right *content* edge, so if a theme gives that block inline-end padding
+       (e.g. a padded blockquote card) the anchor is inset and the note drifts left.
+       Themes expose that inset via --sidenote-anchor-inset (default 0) — best derived
+       from the same token that sets the padding — so the note still reaches the gutter
+       no matter how the container is indented. Core's own blocks add no inset. */
+    float: right;
+    clear: right;
+    margin-right: calc(
+      var(--layout-sidenote-margin) - var(--sidenote-anchor-inset, 0px)
+    );
+    width: var(--layout-sidenote-width);
+    margin-top: 0.3rem;
+    /* Breathing room so multiple notes from one paragraph don't touch when they stack. */
+    margin-bottom: 1.4rem;
+    vertical-align: baseline;
+    position: relative;
+
+    /* Typographic isolation. A footnote is an annotation, not part of the text it
+       hangs off of, so it must render identically no matter what its reference sits
+       inside. The body span is emitted at the reference position (see tiptap-render
+       renderSidenoteReference), so when the [^n] is inside a blockquote / bold run /
+       heading the span inherits that context. Pin every inheritable type property to
+       the canonical note look to cut every such leak — not just the blockquote
+       serif+italic case. */
+    font-family: var(--font-body);
+    font-size: var(--type-sm);
+    font-style: normal;
+    font-weight: 400;
+    font-variant: normal;
+    line-height: 1.3;
+    letter-spacing: var(--type-body-tracking, normal);
+    text-align: left;
+    color: var(--site-reading-meta);
+  }
+
+  .sidenote-number {
+    counter-increment: sidenote-counter;
+  }
+
+  .sidenote-number::after,
+  .sidenote:not([role="doc-footnote"])::before {
+    position: relative;
+    vertical-align: baseline;
+  }
+
+  .sidenote-number::after {
+    content: counter(sidenote-counter);
+    font-size: var(--type-code);
+    top: -0.5rem;
+    /* Real margins (not `left`, which reserves no space) so the superscript
+       number keeps a gap from the words on both sides — matters for CJK, which
+       has no inter-word spacing. */
+    margin-left: 0.1rem;
+    margin-right: 0.25rem;
+  }
+
+  .sidenote:not([role="doc-footnote"])::before {
+    content: counter(sidenote-counter) " ";
+    font-size: var(--type-xs);
     top: -0.5rem;
   }
 
-  .sidenote > code,
+  .sidenote:not([role="doc-footnote"]) > code,
   .marginnote > code {
     font-size: var(--type-code);
   }
@@ -2452,12 +2851,12 @@
       cursor: pointer;
     }
 
-    .sidenote,
+    .sidenote:not([role="doc-footnote"]),
     .marginnote {
       display: none;
     }
 
-    .margin-toggle:checked + .sidenote,
+    .margin-toggle:checked + .sidenote:not([role="doc-footnote"]),
     .margin-toggle:checked + .marginnote {
       display: block;
       float: left;
@@ -2540,21 +2939,52 @@
     flex-shrink: 0;
   }
 
+  /* One dot on both rails: a flat fill with a surface-coloured gap punched
+     around it, so it reads as a bead threaded on the rail rather than a bulge in
+     it. Same size, same colours, same punch — reading then rings it (below) and
+     compose stops at the fill. What a post *is* comes from its card; the dot
+     only says where it sits on the chain, and an accent fill says which one the
+     view is about. */
   .thread-group,
   .compose-thread-layout {
-    --site-thread-marker-size: 10px;
-    --site-thread-marker-border-width: 2px;
-    --site-thread-marker-ring-width: 2px;
-    --site-thread-marker-hero-size: 14px;
-    --site-thread-marker-hero-border-width: 3px;
+    --site-thread-marker-size: 7px;
+    /* Kept at 7:1.5 with the marker. A 7px dot on a 1px hairline reads as a bead
+       dropped onto a thread rather than the same stroke thickening; the timeline
+       components this pattern comes from (Ant, CodyHouse) all run a 2px rail. */
+    --site-thread-rail-line-width: 1.5px;
+    /* The gap's ceiling is set by whichever dot has the rail on one side only —
+       in compose that's the last post, where the rail is trimmed. One line end
+       holds it instead of two, and around 12px it reads as floating loose. */
+    --site-thread-marker-gap: 9px;
     --site-thread-marker-surface: var(--site-page-bg);
+    /* "This is the post the view is about." Tinted toward the rail rather than
+       the raw accent: every other accent-derived token in the system sits
+       between 6% and 24% (see tokens.css), and a 7px shape at full accent was
+       the single highest-contrast thing in an otherwise near-empty column. */
+    --site-thread-marker-current: color-mix(
+      in srgb,
+      var(--site-accent) 90%,
+      var(--site-threadline)
+    );
+  }
+
+  .compose-thread-layout {
+    --site-thread-marker-surface: var(--compose-paper-bg);
   }
 
-  /* Thread group: timeline layout — vertical line with dot markers */
+  /* Thread group: timeline layout — vertical line with dot markers.
+     Reading rings its dots; compose doesn't. A compose dot sits beside a card
+     edge, a format switcher and a "1/3", so a joint in the line is all it has to
+     be. Reading's rail runs down an otherwise empty column, where a bare fill
+     reads as a speck of stray threadline — the ring gives it a silhouette
+     without making it any louder, since the tint is the same 16% accent every
+     other halo in the system uses. Held off the fill by a band of surface so
+     the two stay separate marks rather than one fuzzy dot. */
   .thread-group {
     --site-thread-rail-indent: 24px;
     --site-thread-rail-line-left: 5px;
-    --site-thread-rail-line-width: 2px;
+    --site-thread-marker-ring-inset: 2px;
+    --site-thread-marker-ring-width: 2px;
     position: relative;
     padding-left: var(--site-thread-rail-indent);
   }
@@ -2588,28 +3018,55 @@
 
   /* Dot marker at each post position — auto-centered on the rail line.
      Line ::before is relative to .thread-group, but dot ::before is relative
-     to .thread-item which sits inside the padding (indent), so we subtract it. */
+     to .thread-item which sits inside the padding (indent), so we subtract it.
+     Every length here is derived: a hardcoded half-marker is what once left the
+     compose rail running down the edge of its own dots instead of through them. */
   .thread-item::before {
     content: "";
     position: absolute;
     left: calc(
       var(--site-thread-rail-line-left) + var(--site-thread-rail-line-width) /
-        2 - 6px - var(--site-thread-rail-indent)
+        2 - var(--site-thread-marker-size) / 2 - var(--site-thread-rail-indent)
     );
     top: 50%;
     transform: translateY(-50%);
-    width: 12px;
-    height: 12px;
+    width: var(--site-thread-marker-size);
+    height: var(--site-thread-marker-size);
     border-radius: 50%;
     background-color: var(--site-threadline);
+    /* Three concentric layers off one border box, painted first-on-top: a band
+       of surface, the accent ring, then the rest of the punch-out. The punch's
+       radius is unchanged, so the ring sits inside the gap the rail line was
+       already broken for and nothing downstream (`.thread-context-shell`'s
+       inset, the compose switcher's overhang) has to move for it. */
+    box-shadow:
+      0 0 0 var(--site-thread-marker-ring-inset)
+        var(--site-thread-marker-surface),
+      0 0 0
+        calc(
+          var(--site-thread-marker-ring-inset) +
+            var(--site-thread-marker-ring-width)
+        )
+        var(--site-thread-dot-ring),
+      0 0 0 var(--site-thread-marker-gap) var(--site-thread-marker-surface);
     z-index: 1;
   }
 
+  /* "This is the post the view is about": the feed preview's latest reply, a
+     curated preview's highlighted segment, and the post you opened on a detail
+     page. One signal for all three — accent fill on the same dot. Hero and
+     curated also ran 4px larger; the full card beside them already says it, so
+     size was a second signal doing the first one's job. */
+  .thread-item-hero::before,
+  .thread-item-curated::before,
+  .thread-item-current::before {
+    background-color: var(--site-thread-marker-current);
+  }
+
   .thread-group-preview,
   .thread-group-detail {
     --site-thread-rail-indent: 0px;
     --site-thread-rail-line-left: -27px;
-    --site-thread-rail-line-width: 1px;
   }
 
   @media (max-width: 760px) {
@@ -2620,6 +3077,12 @@
     }
   }
 
+  /* The rail fades in at the top, where collapsed ancestor context begins: the
+     thread continues above what this view shows, so the line shouldn't start on
+     a hard edge. The bottom needs no matching fade — the line is cut at the last
+     dot instead. Compose doesn't share the gradient: its rail is drawn per row
+     so both ends can be trimmed, and a per-row gradient would fade once per
+     post rather than once per thread. */
   .thread-group-preview::before,
   .thread-group-detail::before {
     background: linear-gradient(
@@ -2630,39 +3093,44 @@
     );
   }
 
+  /* The rail ends at the last dot. Below it the line pointed at posts that
+     aren't there — the thread is over, and compose already trims its own rail
+     the same way. Painted over rather than shortened: the line is one box on the
+     group so it can carry a single gradient, and only the last post knows where
+     its own dot sits (its own 50%). `> ` scopes this to the group's own children
+     — the ancestors inside `.thread-context-shell` have a last child too, and
+     the rail must run straight through it. */
+  .thread-group > .thread-item:last-child::after {
+    content: "";
+    position: absolute;
+    left: calc(
+      var(--site-thread-rail-line-left) - var(--site-thread-rail-indent)
+    );
+    top: 50%;
+    bottom: 0;
+    width: var(--site-thread-rail-line-width);
+    background-color: var(--site-thread-marker-surface);
+  }
+
   .thread-group-preview .thread-item,
   .thread-group-detail .thread-item {
     padding: var(--site-thread-item-spacing) 0;
   }
 
-  .thread-group-preview .thread-item::before,
-  .thread-group-detail .thread-item::before {
-    left: calc(
-      var(--site-thread-rail-line-left) + var(--site-thread-rail-line-width) /
-        2 - var(--site-thread-marker-size) / 2 - var(--site-thread-rail-indent)
-    );
-    width: var(--site-thread-marker-size);
-    height: var(--site-thread-marker-size);
-    border: var(--site-thread-marker-border-width) solid
-      var(--site-thread-marker-surface);
-    background-color: var(--site-threadline);
-    box-shadow: 0 0 0 var(--site-thread-marker-ring-width)
-      var(--site-thread-dot-ring);
-  }
-
   /* Collapsible ancestor context wrapper.
      Server-rendered with `data-collapsed`. Crop and fade are always active
      while data-collapsed is set; JS only toggles the Show more/less button
      visibility based on real overflow. Negative left margin + matching
      padding extends the shell's box past the content edge so the dot
-     markers (which live at left:-31.5px on desktop) survive
-     `overflow: hidden`. `box-sizing: content-box` keeps the inner content
-     width identical to before. */
+     markers survive `overflow: hidden`. `box-sizing: content-box` keeps the
+     inner content width identical to before. The inset has to clear the dot's
+     punched gap, not just its fill: on desktop the fill starts at -30px but the
+     gap reaches -39px, so the old 40px cleared it by a single pixel. */
   .thread-context-shell {
     position: relative;
     box-sizing: content-box;
-    margin-left: -40px;
-    padding-left: 40px;
+    margin-left: -48px;
+    padding-left: 48px;
     transition: max-height 0.32s cubic-bezier(0.4, 0, 0.2, 1);
   }
 
@@ -2853,37 +3321,6 @@
     padding-top: 0.95rem;
   }
 
-  .thread-group-preview .thread-item-hero::before,
-  .compose-editor-row .compose-thread-dot {
-    left: calc(
-      var(--site-thread-rail-line-left) + var(--site-thread-rail-line-width) /
-        2 - var(--site-thread-marker-hero-size) / 2 -
-        var(--site-thread-rail-indent)
-    );
-    width: var(--site-thread-marker-hero-size);
-    height: var(--site-thread-marker-hero-size);
-    border: var(--site-thread-marker-hero-border-width) solid
-      var(--site-thread-marker-surface);
-    background-color: var(--site-accent);
-    box-shadow: 0 0 0 var(--site-thread-marker-ring-width)
-      var(--site-thread-dot-ring);
-  }
-
-  .thread-group-curated .thread-item-curated::before {
-    left: calc(
-      var(--site-thread-rail-line-left) + var(--site-thread-rail-line-width) /
-        2 - var(--site-thread-marker-hero-size) / 2 -
-        var(--site-thread-rail-indent)
-    );
-    width: var(--site-thread-marker-hero-size);
-    height: var(--site-thread-marker-hero-size);
-    border: var(--site-thread-marker-hero-border-width) solid
-      var(--site-thread-marker-surface);
-    background-color: var(--site-accent);
-    box-shadow: 0 0 0 var(--site-thread-marker-ring-width)
-      var(--site-thread-dot-ring);
-  }
-
   /* Compact text for thread replies */
   .feed-compact {
     @apply text-sm;
@@ -2894,6 +3331,28 @@
     scroll-margin-top: 80px;
   }
 
+  /* --- Trailing draft in a thread (author-only) ---------------------------
+     Rendered so the author sees the same thread end the server does. Reads as
+     provisional — present enough to act on, quiet enough not to pass for
+     published writing. */
+
+  .thread-detail-item article[data-post-draft] {
+    opacity: 0.72;
+    transition: opacity 0.18s ease;
+  }
+
+  .thread-detail-item article[data-post-draft]:hover,
+  .thread-detail-item article[data-post-draft]:focus-within {
+    opacity: 1;
+  }
+
+  /* A draft is not part of the published spine, so its marker is hollow: the
+     rail reaches it, but the dot reads as an empty slot rather than another
+     published stop. */
+  .thread-item:has(article[data-post-draft])::before {
+    background-color: var(--site-thread-marker-surface);
+  }
+
   /* When a child post has an ancestor shell above it (toggle button sits
      directly before the current post), leave enough room above the scroll
      landing so the user can see the Show more button + a peek of the
@@ -2904,23 +3363,6 @@
     scroll-margin-top: 120px;
   }
 
-  .thread-group-detail .thread-item-current::before {
-    background-color: var(--site-accent);
-    box-shadow:
-      0 0 0 var(--site-thread-marker-border-width)
-        var(--site-thread-marker-surface),
-      0 0 0
-        calc(
-          var(--site-thread-marker-border-width) +
-            var(--site-thread-marker-ring-width)
-        )
-        color-mix(
-          in srgb,
-          var(--site-accent) 18%,
-          var(--site-thread-marker-surface)
-        );
-  }
-
   /* Quote block styling */
   .feed-quote {
     margin: 0;
@@ -3005,6 +3447,10 @@
     line-height: 1.3;
   }
 
+  .feed-quote-attribution:has(+ .post-menu-footer) {
+    margin-bottom: 0.45rem;
+  }
+
   .feed-quote-attribution::before {
     content: "";
     width: 0.9rem;
@@ -3135,6 +3581,7 @@
   /* Show the container when at least one status is active */
   article[data-post-pinned] .post-status-badges,
   article[data-post-pinned-in-collection] .post-status-badges,
+  article[data-post-draft] .post-status-badges,
   article[data-post-visibility="private"] .post-status-badges {
     display: flex;
   }
@@ -3165,6 +3612,38 @@
     display: inline-flex;
   }
 
+  article[data-post-draft] .post-status-draft {
+    display: inline-flex;
+  }
+
+  /* The draft badge is a button — the shortest path from "I see an unfinished
+     post" to "I'm finishing it". */
+  .post-status-draft {
+    padding: 0;
+    border: 0;
+    background: transparent;
+    font: inherit;
+    letter-spacing: inherit;
+    cursor: pointer;
+    transition: color 0.18s ease;
+  }
+
+  .post-status-draft:hover,
+  .post-status-draft:focus-visible {
+    color: var(--site-text-primary);
+  }
+
+  .post-status-draft:hover svg,
+  .post-status-draft:focus-visible svg {
+    opacity: 1;
+  }
+
+  .post-status-draft:focus-visible {
+    outline: 2px solid var(--site-accent);
+    outline-offset: 3px;
+    border-radius: 3px;
+  }
+
   .post-status-badge svg {
     width: 11px;
     height: 11px;
@@ -3183,10 +3662,17 @@
 
   .post-footer-detail {
     margin-top: 24px;
-    font-size: var(--type-ui-meta);
+    font-size: var(--type-ui-hint);
     color: var(--site-text-secondary);
   }
 
+  /* A standalone detail footer needs extra breathing room to close the
+     reading surface. Thread entries keep a smaller content gap so their
+     metadata stays connected without crowding the post body. */
+  .thread-group-detail .post-footer-detail {
+    margin-top: var(--content-gap);
+  }
+
   .post-footer-meta {
     display: flex;
     flex: 1 1 auto;
@@ -3605,6 +4091,14 @@
     padding: 0 0.22rem;
   }
 
+  /* Every item in a group is conditional, so a group can end up with none —
+     a draft reply hides both Featured and Pin. Match on element children so
+     Lit's binding comments and the template's whitespace don't count as
+     content, otherwise the empty group still draws its divider and padding. */
+  .post-menu-section:not(:has(> *)) {
+    display: none;
+  }
+
   .post-menu-section + .post-menu-section {
     margin-top: 0.08rem;
     padding-top: 0.3rem;
@@ -4355,7 +4849,12 @@
     }
   }
 
+  /* The one composer that is not a floating sheet: it fills the viewport, so
+     its paper is the page's, not the elevated surface's. Nothing sits behind
+     it to be lifted away from. */
   .compose-page {
+    --compose-paper-bg: var(--site-page-bg);
+
     position: fixed;
     inset: 0;
     z-index: 50;
@@ -4424,19 +4923,18 @@
   .compose-page-shell .compose-dialog-inner {
     min-height: 0;
     max-height: none;
+    padding-top: 0;
     border-radius: inherit;
   }
 
-  .compose-page-shell .compose-dialog-inner > jant-compose-editor,
-  .compose-page-shell .compose-thread-layout,
-  .compose-page-shell .compose-editor-row,
-  .compose-page-shell .compose-editor-row > jant-compose-editor {
+  /* The page itself is the scroller here, so the composer's region gives up
+     its own and grows to whatever it holds. */
+  .compose-page-shell .compose-scroll {
     flex: 0 1 auto;
-    min-height: 0;
+    overflow: visible;
   }
 
   .compose-page-shell .compose-body {
-    flex: 0 1 auto;
     min-height: clamp(8rem, 22vh, 12rem);
   }
 
@@ -4463,6 +4961,10 @@
     }
 
     .compose-page-shell .compose-dialog-inner-page {
+      /* The card's own padding is the text column here, so nothing inside it
+         adds a gutter of its own. */
+      --compose-gutter: 0px;
+
       padding: 20px 24px 16px;
       background-color: var(--compose-floating-bg);
       border: 1px solid var(--compose-control-border);
@@ -4473,40 +4975,25 @@
       overflow: visible;
     }
 
-    .compose-page-shell .compose-dialog-inner-page .compose-dialog-header {
-      display: grid;
-      grid-template-columns: 1fr auto;
-      align-items: center;
-      gap: 12px;
-      padding: 0 0 16px;
-    }
-
-    .compose-page-shell
-      .compose-dialog-inner-page
-      .compose-dialog-header-center {
-      position: static;
-      transform: none;
-      justify-self: start;
-      min-width: 0;
-    }
-
-    .compose-page-shell .compose-dialog-inner-page .compose-dialog-cancel {
-      display: none;
-    }
-
     .compose-page-shell .compose-dialog-inner-page .compose-body {
-      padding: 22px 0 12px;
+      padding: 22px 0 12px var(--compose-gutter);
       min-height: clamp(16rem, 36vh, 24rem);
     }
 
+    /* Only the right is restated: the left comes from the card's own gutter,
+       which is what every one of these rows already reads. */
     .compose-page-shell .compose-dialog-inner-page .compose-tools-row,
     .compose-page-shell .compose-dialog-inner-page .compose-add-thread-trigger {
-      padding-inline: 0;
+      padding-inline-end: 0;
       background: transparent;
     }
 
+    .compose-page-shell .compose-dialog-inner-page .compose-thread-post-header {
+      padding-inline-end: 0;
+    }
+
     .compose-page-shell .compose-dialog-inner-page .compose-attachments-dock {
-      padding-inline: 0;
+      padding-inline-end: 0;
       background: transparent;
     }
 
@@ -4515,7 +5002,15 @@
       bottom: 0;
       z-index: 5;
       margin-inline: 0;
-      padding: 14px 0 0;
+      padding: 14px 0 0 var(--compose-gutter);
+      background-color: inherit;
+    }
+
+    /* Takes the page's gutter rather than the dialog's, so the toggles line up
+       under Publish instead of sitting 12px inside it. */
+    .compose-page-shell .compose-dialog-inner-page .compose-quick-actions-row {
+      padding-inline: 0;
+      padding-bottom: 2px;
       background-color: inherit;
     }
 
@@ -4540,8 +5035,8 @@
 
   .compose-dialog,
   .compose-page-shell > jant-compose-dialog {
-    --compose-title-input-size: var(--type-content-subtitle);
-    --compose-title-input-leading: var(--type-display-leading);
+    --compose-title-input-size: calc(var(--type-content-body) * 1.2);
+    --compose-title-input-leading: 1.35;
     --compose-quote-input-size: var(--type-content-subtitle);
     --compose-quote-input-leading: 1.32;
     --compose-inline-input-size: var(--type-ui-input);
@@ -4550,12 +5045,40 @@
     --compose-panel-control-size: var(--type-ui-control);
     --compose-summary-size: var(--type-ui-meta);
     --compose-primary-button-size: var(--type-ui-meta);
+
+    /* How far the format switcher is pulled left of the text column. Declared
+       up here with the other compose tunables so one value covers the dialog,
+       the /new page and every thread row at once. See `.compose-segmented` for
+       what the endpoints look like and why 12px is the ceiling. */
+    --compose-switcher-hang: 8px;
+
+    /* The composer's text column, measured from each row's own container.
+       Every row starts its padding here and the control inside it hangs its
+       box back out by its own optical inset, so what lands on the column is
+       the glyph or the label rather than the box around it — the switcher's
+       hang above is the same idea, named per control because each one is
+       inset by a different amount.
+
+       It drops to 0 wherever something outside the editor already supplies the
+       indent: a thread row's rail, or the /new card's own padding. Only the
+       left is expressed this way; the right paddings stay per-row, because a
+       thread row is indented on one side only. */
+    --compose-gutter: 20px;
+  }
+
+  /* The fullscreen sheet renders none of these rows today, but it does share
+     `.compose-editor-row`. Give it the column too rather than leave the value
+     undefined there: an undefined custom property drops the whole padding
+     declaration that reads it instead of falling back to a sane number. */
+  .compose-fullscreen-dialog {
+    --compose-gutter: 20px;
   }
 
   @media (min-width: 700px) {
     .compose-dialog,
+    .compose-fullscreen-dialog,
     .compose-page-shell > jant-compose-dialog {
-      --compose-title-input-size: var(--feed-note-title-size);
+      --compose-gutter: 24px;
     }
   }
 
@@ -4575,7 +5098,7 @@
     box-shadow:
       0 8px 40px rgba(0, 0, 0, 0.08),
       0 1px 3px rgba(0, 0, 0, 0.04);
-    border: 1px solid var(--compose-control-border);
+    border: 1px solid var(--site-raised-border);
     overflow: visible;
   }
 
@@ -4583,8 +5106,15 @@
     animation: compose-modal-in 0.32s cubic-bezier(0.22, 1, 0.36, 1) both;
   }
 
+  /* The dim is only half of it. On a dark page there is no luminance left to
+     take away — 0.3 → 0.7 alpha moves the dialog's contrast against its own
+     backdrop by 0.05 — so the blur carries the separation instead. It reads as
+     depth rather than darkness, which is the one cue that still works when the
+     page and the sheet are three percent apart. */
   .compose-dialog::backdrop {
     background-color: rgba(0, 0, 0, 0.3);
+    backdrop-filter: blur(3px);
+    -webkit-backdrop-filter: blur(3px);
   }
 
   .compose-dialog jant-compose-dialog {
@@ -4604,10 +5134,15 @@
     background: transparent;
   }
 
+  /* The composer opens straight onto the first post's header row now that the
+     title bar is gone, so the top gutter it used to provide lives here. It
+     cannot go on the row itself: single-post mode's wrapper is
+     `display: contents` and generates no box to pad. */
   .compose-dialog-inner {
     display: flex;
     flex-direction: column;
     max-height: calc(100dvh - var(--compose-margin-top) - 20px);
+    padding-top: 10px;
     position: relative;
     background-color: var(--compose-paper-bg);
     border-radius: inherit;
@@ -4627,12 +5162,31 @@
     pointer-events: none;
   }
 
-  .compose-dialog-inner > jant-compose-editor {
+  /* The composer's one scroll region. Every block inside it — editor body,
+     attachments, per-post toolbar — flows at its natural height and scrolls
+     together, so there is a single answer to "what scrolls?" in every mode.
+     Only the action row below it stays pinned. Nesting a second scroller in
+     here (a fixed-height body, a capped attachment dock) is what forced the
+     old previews to be small; don't reintroduce one. */
+  .compose-scroll {
     flex: 1;
     min-height: 0;
+    overflow-y: auto;
+    overflow-x: hidden;
+  }
+
+  .compose-scroll::-webkit-scrollbar {
+    width: 3px;
+  }
+
+  .compose-scroll::-webkit-scrollbar-thumb {
+    background-color: var(--site-divider);
+    border-radius: 4px;
+  }
+
+  .compose-scroll > jant-compose-editor {
     display: flex;
     flex-direction: column;
-    overflow: hidden;
     position: relative;
   }
 
@@ -4710,120 +5264,39 @@
 
   /* --- Header ------------------------------------------------------------- */
 
-  .compose-dialog-header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    min-height: 3.6rem;
-    padding: 12px 14px;
-    background-color: var(--compose-paper-bg);
-    border-top-left-radius: inherit;
-    border-top-right-radius: inherit;
-    position: relative;
-    z-index: 4;
-  }
-
-  @media (min-width: 700px) {
-    .compose-dialog-header {
-      padding: 14px 18px;
-    }
-  }
+  /* Leaves the composer, so unlike the per-post × it never hides until hover:
+     on a phone this and the options sheet are the only ways out. */
+  .compose-close-btn {
+    --compose-dialog-icon-paper-fill: var(--compose-paper-bg);
 
-  .compose-dialog-cancel {
-    min-height: 44px;
-    min-width: 72px;
-    padding: 10px 14px;
-    border: none;
-    background: none;
-    border-radius: 10px;
-    color: var(--site-text-secondary);
-    font-size: var(--type-ui-control);
-    font-weight: var(--fw-medium);
-    cursor: pointer;
-    transition: color 0.15s ease-out;
-    flex-shrink: 0;
-    text-align: left;
-  }
-
-  .compose-dialog-cancel:hover {
-    color: var(--site-text-primary);
-  }
-
-  .compose-dialog-header-center {
-    position: absolute;
-    left: 50%;
-    transform: translateX(-50%);
-    width: max-content;
-    max-width: calc(100% - 9.5rem);
-  }
-
-  .compose-dialog-header-actions {
-    display: flex;
-    align-items: center;
-    gap: 0;
-    flex-shrink: 0;
-    min-width: 44px;
-    justify-content: flex-end;
-  }
-
-  .compose-dialog-title {
-    font-weight: var(--fw-semibold);
-    font-size: var(--type-ui-control);
-    line-height: 1.2;
-  }
-
-  .compose-dialog-header-btn {
-    --compose-dialog-icon-paper-fill: var(--compose-paper-bg);
-
-    display: flex;
+    display: inline-flex;
     align-items: center;
     justify-content: center;
-    width: 44px;
-    height: 44px;
-    border-radius: 12px;
+    margin-left: auto;
+    width: 28px;
+    height: 28px;
+    border-radius: 8px;
     border: none;
-    background: none;
+    background: transparent;
     color: var(--site-text-secondary);
     cursor: pointer;
+    flex-shrink: 0;
+    opacity: 0.6;
     transition:
-      background-color 0.15s ease-out,
-      color 0.15s ease-out;
+      opacity 0.15s ease,
+      background-color 0.13s ease,
+      color 0.13s ease;
   }
 
-  .compose-dialog-header-btn:hover {
-    --compose-dialog-icon-paper-fill: var(--compose-control-bg);
-    color: var(--site-text-primary);
+  .compose-close-btn:hover {
+    opacity: 1;
     background-color: var(--compose-control-bg);
-  }
-
-  .compose-dialog-draft-btn {
-    color: color-mix(
-      in srgb,
-      var(--site-text-primary) 48%,
-      var(--site-text-secondary)
-    );
-  }
-
-  .compose-dialog-header-icon {
-    display: block;
-    width: 26px;
-    height: 26px;
-    --icon-stroke: 1.32;
-    flex-shrink: 0;
-    overflow: visible;
-  }
-
-  .compose-dialog-draft-btn .compose-dialog-header-icon {
-    --icon-stroke: 1.24;
-  }
-
-  .compose-dialog-draft-btn:hover {
     color: var(--site-text-primary);
   }
 
-  .compose-dialog-header-btn:disabled {
-    opacity: 0.3;
-    cursor: not-allowed;
+  .compose-edit-loading-close {
+    display: flex;
+    justify-content: flex-end;
   }
 
   /* Treat touch-first browsers as mobile here too. iOS Safari can expose a
@@ -4863,29 +5336,13 @@
       padding-left: calc(20px + env(safe-area-inset-left));
     }
 
-    .compose-dialog-inner > jant-compose-editor,
-    .compose-thread-layout,
-    .compose-editor-row,
-    .compose-editor-row > jant-compose-editor {
-      flex: 0 1 auto;
-    }
-
-    .compose-dialog-inner > jant-compose-editor,
-    .compose-editor-row > jant-compose-editor {
-      max-height: calc(
-        100dvh - 13rem - env(safe-area-inset-top) - env(safe-area-inset-bottom)
-      );
-    }
-
-    .compose-dialog-header {
-      padding-top: calc(12px + env(safe-area-inset-top));
-      padding-right: calc(14px + env(safe-area-inset-right));
-      padding-left: calc(14px + env(safe-area-inset-left));
-      border-bottom: 1px solid var(--compose-control-border);
+    /* Fullscreen on a phone, so the composer's own first row sits under the
+       notch — it takes the inset the title bar used to. */
+    .compose-dialog-inner {
+      padding-top: calc(10px + env(safe-area-inset-top));
     }
 
     .compose-body {
-      flex: 0 1 auto;
       min-height: clamp(8rem, 22vh, 12rem);
       padding-right: calc(20px + env(safe-area-inset-right));
       padding-left: calc(20px + env(safe-area-inset-left));
@@ -4912,92 +5369,100 @@
     }
   }
 
-  /* --- Format switcher with animated pill --------------------------------- */
+  /* --- Format switcher ----------------------------------------------------- */
 
+  /* One grouped control — a tinted track with a pill on the active format.
+     The strip's own inset (track padding + item padding) is 16px, so its box
+     and its first label can never both sit on the text column: whatever the
+     strip is pulled left by, the other edge is 16px away from the text. There
+     is no value that aligns both, only a choice of which one to favour, so the
+     amount is a knob rather than a derived number:
+
+       0px  strip's tinted box on the text edge, "Note" 16px inside it
+       8px  neither edge exact; the tint is light enough that the perceived
+            edge sits between them, which is why this is the default
+       16px "Note" on the text edge, the tint hanging a full inset out
+
+     12px is the hard ceiling: in a thread row the rail dot ends 12px short of
+     the content edge, and past that the tint runs over the dot. */
   .compose-segmented {
+    --compose-switcher-track-pad: 3px;
+    --compose-switcher-item-pad: 13px;
+
     display: inline-flex;
-    background-color: var(--compose-control-bg);
-    border-radius: 10px;
-    padding: 3px;
+    flex: none;
+    gap: 1px;
+    padding: var(--compose-switcher-track-pad);
+    margin-inline-start: calc(-1 * var(--compose-switcher-hang));
+    /* Paints over the thread rail dot, not under it. The dot carries a
+       surface-coloured ring (`--site-thread-marker-gap`) to break the rail line
+       around itself, and that ring reaches further right than the dot does —
+       far enough to clip the strip's left edge once it hangs. Both sit at
+       z-index 1, so the strip wins on document order. Covering ring pixels is
+       harmless here: the line it protects runs down the dot's centre, well left
+       of anywhere the strip reaches. */
     position: relative;
-    box-shadow: inset 0 0 0 1px var(--compose-control-border);
+    z-index: 1;
+    border-radius: calc(var(--compose-switcher-track-pad) + 8px);
+    background-color: var(--compose-control-bg);
     font-family: var(--font-ui);
   }
 
-  .compose-format-pill {
-    position: absolute;
-    top: 3px;
-    left: 3px;
-    width: calc((100% - 6px) / 3);
-    height: calc(100% - 6px);
-    background-color: var(--compose-paper-bg);
-    border-radius: 7px;
-    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
-    transition: left 0.28s cubic-bezier(0.22, 1, 0.36, 1);
-    z-index: 0;
-  }
-
-  .compose-format-pill-link {
-    left: calc(3px + (100% - 6px) / 3);
-  }
-
-  .compose-format-pill-quote {
-    left: calc(3px + (100% - 6px) * 2 / 3);
-  }
-
   .compose-segmented-item {
-    position: relative;
-    z-index: 1;
-    flex: 1;
-    padding: 5px 0.95rem;
-    border-radius: 8px;
+    flex: none;
+    padding: 5px var(--compose-switcher-item-pad);
     border: none;
+    border-radius: 8px;
     background: transparent;
     color: var(--site-text-secondary);
     font-size: var(--type-ui-hint);
     font-weight: var(--fw-medium);
     line-height: 1.2;
-    cursor: pointer;
-    transition: color 0.2s ease;
     letter-spacing: 0.01em;
+    cursor: pointer;
+    transition:
+      color 0.15s ease,
+      background-color 0.15s ease,
+      box-shadow 0.15s ease;
   }
 
-  @media (min-width: 700px) {
-    .compose-segmented-item {
-      padding: 0.4rem 1.15rem;
-      font-size: var(--type-ui-control);
-    }
+  .compose-segmented-item:hover:not(.compose-segmented-item-active) {
+    color: var(--site-text-primary);
   }
 
   .compose-segmented-item-active {
     color: var(--site-text-primary);
-    font-weight: var(--fw-medium);
+    background-color: var(--compose-paper-bg);
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
   }
 
   /* --- Body --------------------------------------------------------------- */
 
+  /* Grows with its content — `.compose-scroll` does the scrolling. The floor is
+     a target to click into on an empty post, so it yields once the post has an
+     attachment: below a full-size preview the same space reads as a gap between
+     the text and the picture. */
   .compose-body {
-    flex: 1;
-    min-height: 0;
-    overflow-y: auto;
-    padding: 16px 20px 12px;
+    min-height: 72px;
+    padding: 16px 20px 12px var(--compose-gutter);
     display: flex;
     flex-direction: column;
   }
 
-  @media (min-width: 700px) {
-    .compose-body {
-      padding: 18px 24px 12px;
-    }
+  jant-compose-editor:has(.compose-attachments-dock) .compose-body {
+    min-height: 0;
   }
 
-  .compose-body::-webkit-scrollbar {
-    width: 3px;
+  jant-compose-editor:has(.compose-attachments-dock)
+    .compose-tiptap-body
+    .tiptap {
+    min-height: 0;
   }
 
-  .compose-body::-webkit-scrollbar-thumb {
-    background-color: var(--site-divider);
-    border-radius: 4px;
+  @media (min-width: 700px) {
+    .compose-body {
+      padding: 18px 24px 12px var(--compose-gutter);
+    }
   }
 
   .compose-field-enter {
@@ -5023,22 +5488,25 @@
     color: var(--site-text-secondary);
   }
 
+  /* An optional field sitting directly above the one people came to type in:
+     the empty state should recede, not announce itself. */
+  .compose-note-title::placeholder,
+  .compose-link-title::placeholder {
+    color: color-mix(in srgb, var(--site-text-secondary) 55%, transparent);
+    font-weight: 400;
+  }
+
   .compose-input:focus::placeholder {
     opacity: 0.6;
   }
 
   /* --- Note mode ---------------------------------------------------------- */
 
-  .compose-note-title-row {
-    display: flex;
-    align-items: center;
-    gap: 10px;
-    margin-bottom: 14px;
-    animation: compose-fade-up 0.28s cubic-bezier(0.22, 1, 0.36, 1) both;
-  }
-
   .compose-note-title {
-    flex: 1;
+    width: 100%;
+    /* Sole owner of the title-to-body gap now that the first block's lead-in
+       margin is gone — one place to tune instead of two that stack. */
+    margin-bottom: 12px;
     font-family: var(--font-heading);
     font-size: var(--compose-title-input-size);
     font-weight: var(--type-heading-weight);
@@ -5047,30 +5515,6 @@
     text-wrap: pretty;
   }
 
-  @media (min-width: 700px) {
-    .compose-note-title {
-      font-size: var(--compose-title-input-size);
-    }
-  }
-
-  .compose-note-title-dismiss {
-    border: none;
-    background: transparent;
-    color: var(--site-text-secondary);
-    cursor: pointer;
-    font-size: var(--type-ui-hint);
-    padding: 6px 8px;
-    border-radius: 8px;
-    flex-shrink: 0;
-    line-height: 1;
-    opacity: 0.6;
-    transition: opacity 0.15s ease;
-  }
-
-  .compose-note-title-dismiss:hover {
-    opacity: 1;
-  }
-
   .compose-body-input {
     width: 100%;
     padding: 0;
@@ -5131,17 +5575,11 @@
     font-weight: var(--type-heading-weight);
     letter-spacing: var(--type-heading-tracking);
     line-height: var(--compose-title-input-leading);
-    margin-bottom: 16px;
+    margin-bottom: 10px;
     padding-left: 2px;
     text-wrap: pretty;
   }
 
-  @media (min-width: 700px) {
-    .compose-link-title {
-      font-size: var(--compose-title-input-size);
-    }
-  }
-
   /* --- Quote mode --------------------------------------------------------- */
 
   .compose-quote-wrap {
@@ -5212,15 +5650,17 @@
     font-weight: var(--fw-regular);
     line-height: var(--compose-quote-input-leading);
     letter-spacing: -0.02em;
-    min-height: 9rem;
+    /* Four lines of the quote's own type — enough to hold most pulled passages
+       without opening a well. Stated in lines so it tracks the two leadings
+       this input takes (1.32 in compose, 1.42 in a reply) instead of needing a
+       pixel value per breakpoint. The `rows` attribute is set to match. */
+    min-height: calc(var(--compose-quote-input-leading) * 4em);
     padding-top: 0.5rem;
     text-wrap: pretty;
   }
 
   @media (min-width: 700px) {
     .compose-quote-text {
-      font-size: var(--compose-quote-input-size);
-      min-height: 9.5rem;
       padding-top: 0.55rem;
     }
   }
@@ -5289,7 +5729,9 @@
 
   .compose-url-input {
     border-bottom: 1px solid transparent;
+    font-family: var(--font-mono);
     font-size: var(--compose-inline-input-size);
+    color: var(--site-accent);
     line-height: 1.4;
     padding-block: 0.1rem;
     transition:
@@ -5386,16 +5828,11 @@
     margin-left: 4px;
   }
 
+  /* Plain background, no top fade: nothing scrolls underneath it any more —
+     the dock travels with its post inside `.compose-scroll`. */
   .compose-attachments-dock {
-    flex-shrink: 0;
-    padding: 8px 20px 4px;
-    background:
-      linear-gradient(
-        180deg,
-        color-mix(in srgb, var(--compose-paper-bg) 0%, transparent) 0%,
-        var(--compose-paper-bg) 18px
-      ),
-      var(--compose-paper-bg);
+    padding: 8px 20px 4px var(--compose-gutter);
+    background-color: var(--compose-paper-bg);
   }
 
   @media (min-width: 700px) {
@@ -5483,26 +5920,31 @@
 
   /* --- Tools row ---------------------------------------------------------- */
 
+  /* Belongs to its post, not to the dialog: it sits under that post's content
+     and scrolls away with it, so a thread shows one toolbar per block. */
   .compose-tools-row {
-    padding: 6px 10px;
+    /* Half the difference between the 44px button and the 20px glyph inside
+       it. The row starts on the text column and its first control hangs back
+       out by this much, so the icon lands on the column while the button keeps
+       its full touch target. 12px is also the ceiling for anything hanging out
+       of a thread row — see `.compose-segmented`, whose knob has the same job
+       for a control with a different inset. */
+    --compose-tool-hang: 12px;
+
+    padding: 6px 10px 6px var(--compose-gutter);
     display: flex;
     align-items: center;
-    flex-shrink: 0;
     gap: 4px;
     background-color: var(--compose-paper-bg);
   }
 
-  .compose-thread-layout .compose-tools-row {
-    padding-inline-start: 0;
-  }
-
-  .compose-thread-layout .compose-tools-row .compose-tool-btn:first-child {
-    margin-inline-start: -10px;
+  .compose-tools-row > :first-child {
+    margin-inline-start: calc(-1 * var(--compose-tool-hang));
   }
 
   @media (min-width: 700px) {
     .compose-tools-row {
-      padding: 6px 16px;
+      padding: 6px 16px 6px var(--compose-gutter);
       gap: 4px;
     }
   }
@@ -5514,37 +5956,64 @@
     justify-content: center;
     width: 44px;
     height: 44px;
+    /* The button keeps its 44px touch target; only the paint is inset, so the
+       chip a hovered or switched-on tool wears is 36px and sits closer to the
+       glyph than to its neighbours. `background-clip` shrinks the corner radii
+       with the box, which is why 12px here reads as 8px on the chip. */
+    padding: 4px;
+    background-clip: content-box;
     border-radius: 12px;
     border: none;
-    background: transparent;
+    background-color: transparent;
     cursor: pointer;
     transition: all 0.18s ease;
     flex-shrink: 0;
-    color: var(--site-text-secondary);
+    color: var(--compose-tool-ink);
   }
 
+  /* One weight for the whole row, stated here rather than per icon, so the
+     stroked glyphs and the star's outline read as one set. */
   .compose-tool-icon {
-    --icon-stroke: 1.46;
     display: block;
     width: 20px;
     height: 20px;
     flex-shrink: 0;
     overflow: visible;
+    stroke-width: 1.42;
   }
 
   .compose-tool-btn:hover {
     background-color: var(--compose-control-bg);
   }
 
+  /* On is a real chip — the shape people already read as "this control is
+     switched on" — just quieter than the one that was tried first. That one
+     paired the chip with full-strength ink, so the whole button lit up at
+     once; here the glyph is left in the row's faded ink and the chip does the
+     talking on its own, a little under the row's hover tint. It is the only
+     edge in the row, so it needs no help to be found. */
   .compose-tool-btn-active {
-    color: var(--site-text-primary);
+    background-color: color-mix(
+      in srgb,
+      var(--compose-control-bg) 85%,
+      var(--compose-paper-bg)
+    );
+  }
+
+  /* Hover has to stay a step above a button that already carries a chip. */
+  .compose-tool-btn-active:hover {
     background-color: var(--compose-control-bg-strong);
   }
 
+  /* A tool that has grown a label is reading matter now, so it carries text's
+     weight — the row's faded ink would put "Add more" under the 4.5:1 floor. */
   .compose-tool-btn-add {
     width: auto;
     gap: 4px;
-    padding: 0 10px 0 8px;
+    /* Same 4px of inset paint as the icon-only buttons; only the sides open up
+       to make room for the label. */
+    padding: 4px 10px 4px 8px;
+    color: var(--site-text-secondary);
   }
 
   .compose-tool-label {
@@ -5553,12 +6022,11 @@
     white-space: nowrap;
   }
 
-  .compose-tool-sep {
-    width: 1px;
-    height: 16px;
-    background-color: var(--site-divider);
-    margin: 0 2px;
-    border-radius: 1px;
+  /* Was a hairline. The two groups (insert something / mark something up) are
+     still worth telling apart, but air does it without drawing another edge
+     into the paper. */
+  .compose-tool-gap {
+    width: 8px;
     flex-shrink: 0;
   }
 
@@ -5572,7 +6040,6 @@
     width: 44px;
     height: 44px;
     border-radius: 12px;
-    color: var(--site-text-secondary);
   }
 
   .compose-tool-btn-view:hover,
@@ -5601,7 +6068,7 @@
   /* --- Action row --------------------------------------------------------- */
 
   .compose-action-row {
-    padding: 10px 12px 14px;
+    padding: 10px 12px 14px var(--compose-gutter);
     display: flex;
     align-items: center;
     gap: 10px;
@@ -5612,7 +6079,10 @@
     border-bottom-right-radius: inherit;
   }
 
+  /* The quick toggles take over the action row's bottom edge when present, so
+     the two read as one block rather than a strip stuck underneath. */
   .compose-action-row:has(+ .compose-quick-actions-row) {
+    padding-bottom: 4px;
     border-bottom-left-radius: 0;
     border-bottom-right-radius: 0;
   }
@@ -5621,17 +6091,54 @@
     z-index: 6;
   }
 
+  .compose-action-row-without-collection {
+    justify-content: flex-end;
+  }
+
+  .compose-quick-actions-row {
+    display: flex;
+    justify-content: flex-end;
+    gap: 0.5rem;
+    padding: 2px 12px 12px;
+    background-color: var(--compose-paper-bg);
+    border-bottom-left-radius: inherit;
+    border-bottom-right-radius: inherit;
+  }
+
   @media (min-width: 700px) {
     .compose-action-row {
-      padding: 12px 18px 16px;
+      padding: 12px 18px 16px var(--compose-gutter);
+    }
+
+    .compose-action-row:has(+ .compose-quick-actions-row) {
+      padding-bottom: 4px;
+    }
+
+    .compose-quick-actions-row {
+      padding: 2px 18px 14px;
     }
   }
 
   .compose-collection-select {
+    /* Optically, not geometrically, centered: the glyph meets the left padding
+       at a vertex and sits inset in its own box, so equal padding leaves the
+       icon side looking open and the label side pinched against the edge.
+       Tune the pill's side padding here and in the touch block below — both
+       set these two values rather than re-declaring `padding`, so neither
+       silently shadows the other. They live on the wrapper because the hang
+       below is measured from them and has to apply to the flex item the action
+       row lays out, not to the trigger inside it. */
+    --compose-collection-pad-icon: 0.56rem;
+    --compose-collection-pad-label: 0.85rem;
+
     display: inline-flex;
     position: relative;
     min-width: 0;
     max-width: 100%;
+    /* Hangs back by the trigger's icon-side inset plus its 1px transparent
+       border, so it is the layers glyph that lands on the text column rather
+       than the pill's edge. */
+    margin-inline-start: calc(-1 * (var(--compose-collection-pad-icon) + 1px));
   }
 
   .compose-collection-select[data-open] {
@@ -5641,14 +6148,18 @@
   .compose-collection-trigger {
     display: flex;
     align-items: center;
-    gap: 0.62rem;
+    gap: 0.38rem;
     min-width: 0;
     max-width: 100%;
-    min-height: 2.45rem;
-    border: 1px solid var(--compose-control-border);
-    background: var(--compose-control-bg);
+    min-height: 1.95rem;
+    /* No fill and no edge at rest — it was the one bordered pill left in the
+       composer, which made picking a collection look like the thing to do. It
+       keeps a transparent border so the box does not resize on hover. */
+    border: 1px solid transparent;
+    background: transparent;
     border-radius: 999px;
-    padding: 0.24rem 0.72rem 0.24rem 0.28rem;
+    padding: 0.2rem var(--compose-collection-pad-label) 0.2rem
+      var(--compose-collection-pad-icon);
     cursor: pointer;
     transition:
       background-color 0.18s ease,
@@ -5659,12 +6170,12 @@
     font-size: var(--type-ui-control);
   }
 
+  /* The same flat wash the tools row uses on hover — no lift, no edge. A chip
+     that rises off the paper is what made this read as the loud control. */
   .compose-collection-trigger:hover,
   .compose-collection-trigger[data-open="true"] {
     color: var(--site-text-primary);
-    background: var(--compose-control-bg-strong);
-    border-color: color-mix(in srgb, var(--site-text-primary) 10%, transparent);
-    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
+    background: var(--compose-control-bg);
   }
 
   .compose-collection-trigger[data-selected="true"] {
@@ -5675,39 +6186,16 @@
     );
   }
 
-  .compose-collection-trigger-icon {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    width: 1.65rem;
-    height: 1.65rem;
-    border-radius: 999px;
-    background: color-mix(
-      in srgb,
-      var(--compose-paper-bg) 72%,
-      var(--compose-control-bg)
-    );
-    color: color-mix(
-      in srgb,
-      var(--site-text-primary) 58%,
-      var(--site-text-secondary)
-    );
-    flex-shrink: 0;
-  }
-
-  .compose-collection-trigger-svg,
   .compose-collection-search-icon,
   .compose-collection-add-svg,
   .compose-collection-option-check-circle,
   .compose-collection-option-plus-circle,
   .compose-collection-option-svg,
-  .compose-collection-chevron,
   .compose-collection-option-check {
     display: block;
     overflow: visible;
   }
 
-  .compose-collection-trigger-svg,
   .compose-collection-option-svg {
     width: 0.92rem;
     height: 0.92rem;
@@ -5715,6 +6203,26 @@
     stroke-width: var(--icon-stroke);
   }
 
+  /* Bare on the pill rather than in its own tinted circle: the pill is already
+     a container, and a chip inside it read as a button inside a button. */
+  .compose-collection-trigger-svg {
+    display: block;
+    overflow: visible;
+    width: 0.86rem;
+    height: 0.86rem;
+    flex-shrink: 0;
+    opacity: 0.75;
+    --icon-stroke: 1.4;
+    stroke-width: var(--icon-stroke);
+  }
+
+  .compose-collection-trigger:hover .compose-collection-trigger-svg,
+  .compose-collection-trigger[data-open="true"] .compose-collection-trigger-svg,
+  .compose-collection-trigger[data-selected="true"]
+    .compose-collection-trigger-svg {
+    opacity: 1;
+  }
+
   .compose-collection-label {
     display: block;
     flex: 1 1 auto;
@@ -5726,32 +6234,18 @@
     font-weight: var(--fw-medium);
   }
 
-  .compose-collection-chevron {
-    width: 0.78rem;
-    height: 0.78rem;
-    flex-shrink: 0;
-    opacity: 0.46;
-    --icon-stroke: 1.38;
-    stroke-width: var(--icon-stroke);
-    transition:
-      transform 0.18s ease,
-      opacity 0.18s ease;
-  }
-
-  .compose-collection-trigger[data-open="true"] .compose-collection-chevron {
-    transform: rotate(180deg);
-    opacity: 0.74;
-  }
-
+  /* Desktop sizing. Every dimension here has a roomier counterpart in the
+     touch block near the end of the file — a picker aimed with a cursor can be
+     tighter than one aimed with a thumb. */
   .compose-collection-select [data-popover] {
     z-index: 100;
-    min-width: 16rem;
-    max-width: 20rem;
+    min-width: 13.5rem;
+    max-width: 17rem;
   }
 
   .compose-collection-popover {
-    padding: 0.56rem 0.62rem 0.5rem;
-    border-radius: 1.08rem;
+    padding: 0.44rem 0.48rem 0.4rem;
+    border-radius: 0.95rem;
     border: 1px solid var(--compose-control-border);
     background: var(--compose-floating-bg);
     box-shadow:
@@ -5761,16 +6255,16 @@
   }
 
   .compose-collection-popover-header {
-    padding: 0.24rem 0 0.6rem;
+    padding: 0.18rem 0 0.44rem;
   }
 
   .compose-collection-search-shell {
     display: flex;
     align-items: center;
-    gap: 0.52rem;
-    min-height: 2.8rem;
-    padding: 0 0.95rem;
-    border-radius: 0.92rem;
+    gap: 0.45rem;
+    min-height: 2.25rem;
+    padding: 0 0.75rem;
+    border-radius: 0.75rem;
     border: 1px solid var(--compose-control-border);
     background: var(--compose-control-bg);
     color: var(--site-text-secondary);
@@ -5793,8 +6287,8 @@
   }
 
   .compose-collection-search-icon {
-    width: 1.15rem;
-    height: 1.15rem;
+    width: 0.98rem;
+    height: 0.98rem;
     flex-shrink: 0;
     --icon-stroke: 1.3;
     stroke-width: var(--icon-stroke);
@@ -5821,7 +6315,7 @@
     display: flex;
     flex-direction: column;
     gap: 0.06rem;
-    max-height: 15rem;
+    max-height: 12.5rem;
     overflow-y: auto;
     padding: 0.08rem;
   }
@@ -5830,15 +6324,15 @@
     width: 100%;
     display: flex;
     align-items: center;
-    gap: 0.75rem;
+    gap: 0.6rem;
     min-width: 0;
-    min-height: 3rem;
+    min-height: 2.35rem;
     padding-top: 0;
     padding-bottom: 0;
-    padding-left: 0.8rem !important;
-    padding-right: 0.46rem !important;
+    padding-left: 0.62rem !important;
+    padding-right: 0.4rem !important;
     border: none;
-    border-radius: 0.88rem;
+    border-radius: 0.7rem;
     background: transparent;
     background-image: none !important;
     cursor: pointer !important;
@@ -5878,8 +6372,8 @@
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    width: 1.32rem;
-    height: 1.32rem;
+    width: 1.12rem;
+    height: 1.12rem;
     flex-shrink: 0;
   }
 
@@ -5930,7 +6424,7 @@
   }
 
   .compose-collection-empty {
-    padding: 0.95rem 0.7rem 1.05rem;
+    padding: 0.75rem 0.6rem 0.85rem;
     color: var(--site-text-secondary);
     font-size: var(--type-ui-caption);
     line-height: 1.5;
@@ -5938,8 +6432,8 @@
   }
 
   .compose-collection-footer {
-    margin-top: 0.35rem;
-    padding: 0.35rem 0.22rem 0.12rem;
+    margin-top: 0.28rem;
+    padding: 0.28rem 0.18rem 0.1rem;
     border-top: 1px solid
       color-mix(in srgb, var(--site-divider) 50%, transparent);
   }
@@ -5947,12 +6441,12 @@
   .compose-collection-add-action {
     display: flex;
     align-items: center;
-    gap: 0.75rem;
+    gap: 0.6rem;
     width: 100%;
-    min-height: 3rem;
-    padding: 0 0.8rem;
+    min-height: 2.35rem;
+    padding: 0 0.62rem;
     border: none;
-    border-radius: 1rem;
+    border-radius: 0.7rem;
     background: transparent;
     cursor: pointer;
     text-align: left;
@@ -6033,28 +6527,7 @@
     min-width: 0;
   }
 
-  .compose-quick-actions-row {
-    display: flex;
-    justify-content: flex-end;
-    gap: 0.5rem;
-    padding: 2px 12px 12px;
-    background-color: var(--compose-paper-bg);
-    border-bottom-left-radius: inherit;
-    border-bottom-right-radius: inherit;
-  }
-
-  .compose-action-row:has(+ .compose-quick-actions-row) {
-    padding-bottom: 4px;
-  }
-
   @media (min-width: 700px) {
-    .compose-quick-actions-row {
-      padding: 2px 18px 14px;
-    }
-
-    .compose-action-row:has(+ .compose-quick-actions-row) {
-      padding-bottom: 4px;
-    }
   }
 
   .compose-publish-quick-toggle {
@@ -6117,83 +6590,6 @@
     cursor: not-allowed;
   }
 
-  .compose-publish-summaries {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: flex-end;
-    gap: 0.5rem;
-    width: 100%;
-  }
-
-  .compose-publish-summary {
-    display: inline-flex;
-    align-items: center;
-    gap: 0.48rem;
-    min-height: 2.15rem;
-    max-width: min(100%, 17rem);
-    padding: 0.38rem 0.74rem;
-    border: 1px solid var(--compose-control-border);
-    border-radius: 999px;
-    background-color: color-mix(
-      in srgb,
-      var(--compose-control-bg) 82%,
-      var(--compose-paper-bg)
-    );
-    color: color-mix(
-      in srgb,
-      var(--site-text-primary) 70%,
-      var(--site-text-secondary)
-    );
-    font-size: var(--compose-summary-size);
-    font-weight: var(--fw-medium);
-    line-height: 1.1;
-    cursor: pointer;
-    white-space: nowrap;
-    transition:
-      background-color 0.18s ease,
-      border-color 0.18s ease,
-      color 0.18s ease,
-      transform 0.18s ease;
-  }
-
-  .compose-publish-summary:hover:not(:disabled) {
-    border-color: color-mix(in srgb, var(--site-text-primary) 12%, transparent);
-    background-color: color-mix(
-      in srgb,
-      var(--compose-control-bg-strong) 84%,
-      var(--compose-paper-bg)
-    );
-    color: var(--site-text-primary);
-    transform: translateY(-1px);
-  }
-
-  .compose-publish-summary:disabled {
-    opacity: 0.6;
-    cursor: progress;
-  }
-
-  .compose-publish-summary-icon {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    width: 1rem;
-    height: 1rem;
-    flex-shrink: 0;
-  }
-
-  .compose-publish-summary-icon svg {
-    display: block;
-    width: 100%;
-    height: 100%;
-    overflow: visible;
-  }
-
-  .compose-publish-summary-text {
-    min-width: 0;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-
   .compose-publish-group {
     position: relative;
     display: inline-flex;
@@ -6206,10 +6602,17 @@
     z-index: 100;
   }
 
-  .compose-publish-single,
-  .compose-publish-main,
-  .compose-publish-toggle {
-    min-height: 2.8rem;
+  /* Sized against the row it leads, not in isolation. Measured: Publish 33px,
+     the options trigger 33px, the collection pill 30.5px — Publish and the
+     options circle share a height so they read as one pair at the end of the
+     row, and the collection pill sits just under them. Touch gets the roomier
+     set back further down: 33px is a fine mouse target and a poor thumb one. */
+  .compose-publish-main {
+    /* `em`, not `rem`: the box is a multiple of its own label, so the ratio
+       holds if the button's type ever scales. The reference is 2.4em (36px
+       around a 15px label); ours sits a step under, which is the only place we
+       leave it — every other number in this button is traced. */
+    min-height: 2.2em;
     border: none;
     background: transparent;
     cursor: pointer;
@@ -6219,28 +6622,36 @@
       box-shadow 0.18s ease;
   }
 
-  .compose-publish-single,
+  /* Shape traced from threads.com's Post button, measured off the reference at
+     2x: 1px border, 8px radius, 18px side padding, ~15px bold label, content
+     width with no `min-width` — the reference sizes to its word. Height is the
+     one number we take a step under; see above.
+
+     Where we part from it: threads outlines Post in *both* states, and we only
+     borrow that for disabled (below). Once there is something to post the
+     button fills with ink rather than firming up an outline — a composer this
+     flat can carry one solid object, and it should be the send. Weight and
+     tracking hold across both states so the box does not resize the moment the
+     post becomes postable. */
   .compose-publish-main {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     gap: 0.3rem;
     white-space: nowrap;
-    min-width: 6rem;
     padding: 0 18px;
     background-color: var(--site-text-primary);
     color: var(--site-elevated-bg);
     font-size: var(--compose-primary-button-size);
-    font-weight: var(--fw-semibold);
-    letter-spacing: 0.01em;
+    font-weight: var(--fw-bold);
+    letter-spacing: 0;
     box-shadow: none;
   }
 
-  .compose-publish-single:hover:not(:disabled),
   .compose-publish-main:hover:not(:disabled) {
     background-color: color-mix(
       in srgb,
-      var(--site-text-primary) 94%,
+      var(--site-text-primary) 92%,
       var(--site-elevated-bg)
     );
   }
@@ -6249,138 +6660,32 @@
     display: inline-flex;
     align-items: stretch;
     overflow: hidden;
-    border-radius: 999px;
-    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
+    border-radius: 8px;
   }
 
   .compose-publish-buttons .compose-publish-main {
-    border-radius: 999px 0 0 999px;
-  }
-
-  .compose-publish-buttons-inactive .compose-publish-toggle:not(:disabled) {
-    color: color-mix(
-      in srgb,
-      var(--site-text-secondary) 92%,
-      var(--site-elevated-bg)
-    );
-    background-color: color-mix(
-      in srgb,
-      var(--compose-control-bg) 88%,
-      var(--compose-paper-bg)
-    );
-    --compose-publish-divider-color: color-mix(
-      in srgb,
-      var(--site-divider) 72%,
-      transparent
-    );
-  }
-
-  .compose-publish-buttons-inactive
-    .compose-publish-toggle:not(:disabled):hover,
-  .compose-publish-buttons-inactive
-    .compose-publish-toggle[aria-expanded="true"]:not(:disabled) {
-    color: color-mix(
-      in srgb,
-      var(--site-text-primary) 68%,
-      var(--site-text-secondary)
-    );
-    background-color: color-mix(
-      in srgb,
-      var(--compose-control-bg-strong) 88%,
-      var(--compose-paper-bg)
-    );
-  }
-
-  .compose-publish-buttons-inactive .compose-publish-toggle-chevron {
-    opacity: 0.62;
-  }
-
-  .compose-publish-toggle {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    position: relative;
-    width: 2.75rem;
-    color: var(--site-elevated-bg);
-    background-color: var(--site-text-primary);
-    border-radius: 0 999px 999px 0;
-    flex-shrink: 0;
-    --compose-publish-divider-color: color-mix(
-      in srgb,
-      var(--site-elevated-bg) 14%,
-      transparent
-    );
-  }
-
-  .compose-publish-toggle::before {
-    content: "";
-    position: absolute;
-    left: 0;
-    top: 50%;
-    width: 1px;
-    height: 1rem;
-    transform: translateY(-50%);
-    background-color: var(--compose-publish-divider-color);
-    opacity: 0.7;
-  }
-
-  .compose-publish-toggle:hover:not(:disabled),
-  .compose-publish-toggle[aria-expanded="true"]:not(:disabled) {
-    background-color: color-mix(
-      in srgb,
-      var(--site-text-primary) 94%,
-      var(--site-elevated-bg)
-    );
-  }
-
-  .compose-publish-toggle-chevron {
-    opacity: 0.78;
-    display: block;
-    width: 0.92rem;
-    height: 0.92rem;
-    overflow: visible;
-    --icon-stroke: 1.46;
-    stroke-width: var(--icon-stroke);
-  }
-
-  .compose-publish-single:focus-visible,
-  .compose-publish-main:focus-visible,
-  .compose-publish-toggle:focus-visible,
-  .compose-publish-summary:focus-visible,
-  .compose-publish-chip:focus-visible {
-    outline: 2px solid
-      color-mix(in srgb, var(--site-text-primary) 22%, transparent);
-    outline-offset: 2px;
+    border-radius: 8px;
   }
 
-  .compose-publish-single:disabled:not(.compose-publish-single-loading),
+  /* Nothing postable yet. Both channels step back together: the frame to
+     7% (1.10:1, the reference's #f4f4f4 on white) and the label to 46%
+     (2.12:1, its #b2b2b2). Inactive controls are exempt from the contrast
+     floors, which is the only reason a label may sit this far under 4.5:1. */
   .compose-publish-main:disabled:not(.compose-publish-main-loading) {
     opacity: 1;
-    color: var(--site-text-secondary);
-    background-color: color-mix(
-      in srgb,
-      var(--compose-control-bg) 88%,
-      var(--compose-paper-bg)
-    );
-    box-shadow: none;
-  }
-
-  .compose-publish-toggle:disabled:not(.compose-publish-toggle-loading) {
-    opacity: 1;
-    color: var(--site-text-secondary);
-    background-color: color-mix(
-      in srgb,
-      var(--compose-control-bg) 88%,
-      var(--compose-paper-bg)
-    );
-    border-left-color: color-mix(in srgb, var(--site-divider) 80%, transparent);
+    color: color-mix(in srgb, var(--site-text-secondary) 46%, transparent);
+    background-color: transparent;
+    box-shadow: inset 0 0 0 1px
+      color-mix(in srgb, var(--site-text-secondary) 7%, transparent);
+    cursor: not-allowed;
   }
 
-  .compose-publish-single-loading:disabled,
-  .compose-publish-main-loading:disabled,
-  .compose-publish-toggle-loading:disabled {
-    opacity: 1;
-    cursor: progress;
+  /* Pointing at it says so rather than doing nothing: the frame comes up a
+     step, but the label stays faded and the cursor stays barred, so the hover
+     never promises a press it will not accept. */
+  .compose-publish-main:disabled:not(.compose-publish-main-loading):hover {
+    box-shadow: inset 0 0 0 1px
+      color-mix(in srgb, var(--site-text-secondary) 18%, transparent);
   }
 
   .compose-publish-panel {
@@ -6457,163 +6762,398 @@
     padding-left: calc(1rem + env(safe-area-inset-left));
   }
 
-  .compose-publish-section {
+  /* ── Options sheet ──────────────────────────────────────────────────
+     A vertical list read top to bottom, not a toolbar of chips: muted
+     group label, one full-width row per setting, value or control on the
+     right. Every choice carries its own hint so they can be compared
+     before picking one. */
+
+  .compose-sheet {
     display: flex;
     flex-direction: column;
-    gap: 0.625rem;
   }
 
-  .compose-publish-section-header {
+  .compose-sheet-label {
+    margin: 0;
+    padding: 0.35rem 0.35rem 0.3rem;
+    color: var(--site-text-secondary);
+    font-size: 0.79rem;
+    font-weight: var(--fw-semibold);
+  }
+
+  .compose-sheet-row {
+    --compose-icon-paper-fill: var(--compose-paper-bg);
+
     display: flex;
-    align-items: flex-start;
-    justify-content: space-between;
-    gap: 0.75rem;
+    align-items: center;
+    gap: 0.7rem;
+    width: 100%;
+    padding: 0.5rem 0.45rem;
+    border: none;
+    border-radius: 10px;
+    background: transparent;
+    color: var(--site-text-primary);
+    text-align: left;
+    cursor: pointer;
+    transition: background-color 0.15s ease;
+  }
+
+  .compose-sheet-row:hover:not(:disabled) {
+    --compose-icon-paper-fill: var(--compose-control-bg);
+    background-color: var(--compose-control-bg);
   }
 
-  .compose-publish-section-copy {
+  /* Sized to the visibility glyphs it sits in a list with, so the session rows
+     at the foot of the panel read as the same kind of row. */
+  .compose-sheet-row-icon {
+    display: block;
+    width: 0.98rem;
+    height: 0.98rem;
+    --icon-stroke: 1.3;
+    stroke-width: var(--icon-stroke);
+    flex-shrink: 0;
+    overflow: visible;
+    color: var(--site-text-secondary);
+  }
+
+  .compose-sheet-row:disabled {
+    cursor: not-allowed;
+    opacity: 0.55;
+  }
+
+  .compose-sheet-row:focus-visible {
+    outline: 2px solid
+      color-mix(in srgb, var(--site-text-primary) 22%, transparent);
+    outline-offset: 1px;
+  }
+
+  .compose-sheet-main {
+    display: flex;
+    flex-direction: column;
+    gap: 0.08rem;
+    flex: 1;
     min-width: 0;
   }
 
-  .compose-publish-section-label {
-    color: color-mix(
-      in srgb,
-      var(--site-text-primary) 84%,
-      var(--site-text-secondary)
-    );
-    font-size: var(--compose-panel-label-size);
+  .compose-sheet-title {
+    font-size: 0.9rem;
     font-weight: var(--fw-medium);
-    letter-spacing: 0.01em;
-    line-height: 1.24;
   }
 
-  .compose-publish-section-hint {
-    margin-top: 0.25rem;
+  .compose-sheet-sub {
     color: var(--site-text-secondary);
-    font-size: var(--compose-panel-hint-size);
+    font-size: 0.75rem;
+    line-height: 1.4;
+  }
+
+  .compose-sheet-check,
+  .compose-sheet-caret {
+    display: inline-flex;
+    flex-shrink: 0;
+    align-items: center;
+  }
+
+  .compose-sheet-caret {
+    color: var(--site-text-secondary);
+    opacity: 0.75;
+  }
+
+  .compose-sheet-hint {
+    margin: 0;
+    color: var(--site-text-secondary);
+    font-size: 0.75rem;
     line-height: 1.45;
-    text-wrap: pretty;
   }
 
-  .compose-publish-section-action {
+  .compose-sheet-divider {
+    height: 1px;
+    margin: 0.45rem 0.1rem;
+    background-color: var(--site-divider);
+  }
+
+  .compose-sheet-row-switch {
+    cursor: default;
+  }
+
+  .compose-sheet-row-switch > .input[role="switch"] {
     flex-shrink: 0;
-    min-height: 2.1rem;
-    padding: 0.42rem 0.78rem;
-    border: 1px solid var(--compose-control-border);
+  }
+
+  /* ── Per-post date / permalink ──────────────────────────────────────
+     Sits on the post it describes, not in the publish panel. Quiet until the
+     post is hovered or focused, or the values are non-default. Uses
+     margin-left:auto so appearing and disappearing never shifts the × next
+     to it. */
+
+  .compose-post-meta {
+    position: relative;
+    margin-left: auto;
+    /* Without this the flex item cannot shrink past its content's min-content
+       width, so the header row overflows on narrow screens instead of
+       ellipsising the permalink. */
+    min-width: 0;
+    opacity: 0;
+    transition: opacity 0.18s ease;
+  }
+
+  /* Narrow screens show the pill outright instead of revealing it. "Quiet until
+     approached" needs a pointer to approach with, and this width is mostly
+     touch, where there is none — an invisible-until-focused control is just a
+     missing one.
+
+     It must also stay in the layout. Gating `display` on
+     `jant-compose-editor:focus-within` made pressing the pill destroy it:
+     pointerdown moves focus off the editor, the pill unmounts before mouseup,
+     and a press that starts and ends on different elements never becomes a
+     click. The pill was unclickable at this width — only `.click()` from script
+     could open the panel. */
+  @media (max-width: 760px) {
+    .compose-post-meta {
+      opacity: 1;
+    }
+  }
+
+  /* Only the first trailing control claims the free space. Two `auto` margins
+     would split it and strand the pill mid-row. */
+  .compose-post-meta ~ .compose-thread-post-remove,
+  .compose-post-meta ~ .compose-close-btn {
+    margin-left: 0;
+  }
+
+  /* Scoped to the editor element rather than a layout row: single-post mode
+     has no `.compose-editor-row` wrapper to hang this off. */
+  jant-compose-editor:hover .compose-post-meta,
+  jant-compose-editor:focus-within .compose-post-meta,
+  .compose-post-meta-set,
+  .compose-post-meta-open,
+  .compose-post-meta:hover,
+  .compose-post-meta:focus-within {
+    opacity: 1;
+  }
+
+  /* A lone post shows its pill outright. "Quiet until approached" only pays
+     off when several rows would each carry one — with a single pill there is
+     no noise to save, and hiding it made the date/permalink fade out exactly
+     when focus moved to the publish controls, where that metadata matters
+     most. The child combinator is the single-post detector: only that mode
+     renders the editor as a direct child of `.compose-scroll`; reply and
+     thread rows sit inside `.compose-editor-row` and stay quiet. */
+  .compose-scroll > jant-compose-editor .compose-post-meta {
+    opacity: 1;
+  }
+
+  /* Defaults are the common case, so at rest this is a caption rather than a
+     control: no chrome, and dimmer than the format selector it shares the row
+     with. The outline arrives on hover, once it is being aimed at. */
+  .compose-post-meta-pill {
+    display: inline-flex;
+    align-items: center;
+    gap: 5px;
+    max-width: min(17rem, 52vw);
+    min-width: 0;
+    padding: 3px 10px 3px 8px;
+    border: 1px solid transparent;
     border-radius: 999px;
-    background-color: var(--compose-control-bg);
-    color: color-mix(
-      in srgb,
-      var(--site-text-primary) 74%,
-      var(--site-text-secondary)
-    );
-    font-size: var(--compose-panel-control-size);
-    font-weight: var(--fw-medium);
-    line-height: 1;
+    background-color: transparent;
+    color: color-mix(in srgb, var(--site-text-secondary) 62%, transparent);
+    font-family: var(--font-ui);
+    font-size: var(--type-ui-caption);
+    white-space: nowrap;
     cursor: pointer;
     transition:
-      color 0.16s ease,
-      background-color 0.16s ease,
-      border-color 0.16s ease,
-      transform 0.16s ease;
+      background-color 0.15s ease,
+      border-color 0.15s ease,
+      color 0.15s ease;
   }
 
-  .compose-publish-section-action:hover {
+  .compose-post-meta-pill:hover,
+  .compose-post-meta-pill[aria-expanded="true"] {
+    border-color: var(--compose-control-border);
+    background-color: var(--compose-control-bg);
     color: var(--site-text-primary);
-    border-color: color-mix(in srgb, var(--site-text-primary) 14%, transparent);
-    background-color: var(--compose-control-bg-strong);
-    transform: translateY(-1px);
   }
 
-  .compose-publish-section-action:focus-visible {
-    outline: 2px solid
-      color-mix(in srgb, var(--site-text-primary) 18%, transparent);
-    outline-offset: 2px;
+  /* A date or permalink the author chose is real information, not a default —
+     it gets the chrome back and full contrast. */
+  .compose-post-meta-set .compose-post-meta-pill {
+    border-color: color-mix(in srgb, var(--site-text-primary) 32%, transparent);
+    background-color: var(--compose-paper-bg);
+    color: var(--site-text-primary);
+    font-weight: var(--fw-medium);
   }
 
-  .compose-publish-switch-row {
-    display: flex;
-    align-items: flex-start;
-    justify-content: space-between;
-    gap: 0.75rem;
-    cursor: pointer;
+  .compose-post-meta-icon {
+    flex-shrink: 0;
+    opacity: 0.85;
   }
 
-  .compose-publish-switch-row > .input[role="switch"] {
-    flex-shrink: 0;
-    margin-top: 0.1rem;
+  .compose-post-meta-sep {
+    color: color-mix(in srgb, currentcolor 45%, transparent);
   }
 
-  .compose-publish-divider {
-    height: 1px;
-    margin: 0.75rem 0;
-    background-color: color-mix(
-      in srgb,
-      var(--site-text-primary) 8%,
-      transparent
-    );
+  /* Only the permalink gives ground when space runs out — the date is short and
+     already as terse as it gets. Without `overflow: hidden` a shrunk flex item
+     still paints its full text, so a long slug used to run under the date. */
+  .compose-post-meta-value {
+    flex-shrink: 0;
+    min-width: 0;
+    overflow: hidden;
   }
 
-  /* --- Visibility segmented control --------------------------------------- */
+  .compose-post-meta-value-slug {
+    flex-shrink: 1;
+    text-overflow: ellipsis;
+  }
 
-  .compose-publish-chips {
+  /* Fixed, not absolute. The pill it hangs from lives inside `.compose-scroll`,
+     and an absolute panel is clipped by that box — an empty post makes the box
+     shorter than the panel every time, so the footer went missing and focusing
+     the panel scrolled the format switcher off the top to compensate. Fixed
+     leaves the scroller behind; `_updatePostMetaPanelLayout` supplies top/left
+     and the max-height, since only script can know where the pill ended up. */
+  .compose-post-meta-panel {
+    position: fixed;
+    z-index: 100;
+    top: 0;
+    left: 0;
     display: flex;
+    flex-direction: column;
+    gap: 0.85rem;
+    width: min(20rem, calc(100vw - 3rem));
+    /* A window too short for the whole panel scrolls the panel, never crops it.
+       Unset until script measures, so the panel is never briefly 1px tall. */
+    max-height: var(--compose-post-meta-panel-max-height, none);
+    overflow-y: auto;
+    overscroll-behavior: contain;
+    padding: 0.8rem 0.85rem 0.85rem;
+    border: 1px solid var(--compose-control-border);
     border-radius: 12px;
-    padding: 4px;
-    background-color: var(--compose-control-bg);
-    box-shadow: inset 0 0 0 1px var(--compose-control-border);
+    /* Same surface treatment as .compose-publish-panel — it is the same kind
+       of floating panel, and --compose-floating-bg is what adapts to dark. */
+    background-color: var(--compose-floating-bg);
+    box-shadow:
+      0 10px 28px rgba(0, 0, 0, 0.08),
+      0 1px 3px rgba(0, 0, 0, 0.05);
   }
 
-  .compose-publish-chip {
-    flex: 1;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    gap: 0.3rem;
-    min-height: 2.45rem;
-    padding: 0.46rem 0.5rem;
-    border-radius: 10px;
+  /* It takes focus when it opens so the dialog is announced and Tab lands in
+     the fields, but it is a container, not a control — no focus ring. */
+  .compose-post-meta-panel:focus {
+    outline: none;
+  }
+
+  /* ── Date / permalink form ──────────────────────────────────────────
+     Two settings, so they are both just open: a drill row per field meant
+     the panel restated each value directly above the input showing it, and
+     changed height every time one was opened. */
+
+  .compose-meta-field {
+    display: flex;
+    flex-direction: column;
+    gap: 0.4rem;
+  }
+
+  .compose-meta-field-head {
+    display: flex;
+    align-items: baseline;
+    justify-content: space-between;
+    gap: 0.6rem;
+    min-height: 1.15rem;
+  }
+
+  .compose-meta-label {
+    color: var(--site-text-primary);
+    font-size: 0.82rem;
+    font-weight: var(--fw-medium);
+  }
+
+  /* The panel's own way out. Escape and a click outside both close it, but
+     neither announces itself, and on touch there is no Escape key at all. It
+     spans the panel's padding so the divider reads as the foot of the panel
+     rather than a line drawn inside it. */
+  .compose-post-meta-footer {
+    display: flex;
+    justify-content: flex-end;
+    margin: -0.1rem -0.85rem -0.85rem;
+    padding: 0.4rem 0.6rem 0.5rem;
+    border-top: 1px solid
+      color-mix(in srgb, var(--site-divider) 60%, transparent);
+  }
+
+  .compose-post-meta-open {
+    z-index: 100;
+  }
+
+  /* Options trigger: its own button past Publish, never a chevron welded to
+     it. A split button reads as one button. */
+  .compose-options-trigger {
+    display: inline-grid;
+    flex-shrink: 0;
+    place-items: center;
+    width: 2.2rem;
+    height: 2.2rem;
     border: none;
+    border-radius: 999px;
     background: transparent;
-    cursor: pointer;
-    white-space: nowrap;
     color: var(--site-text-secondary);
+    cursor: pointer;
     transition:
       background-color 0.18s ease,
-      box-shadow 0.18s ease,
       color 0.18s ease;
   }
 
-  .compose-publish-chip:hover:not(:disabled):not(
-      .compose-publish-chip-selected
-    ) {
+  .compose-options-trigger:hover:not(:disabled),
+  .compose-options-trigger-open {
+    background-color: var(--compose-control-bg);
     color: var(--site-text-primary);
   }
 
-  .compose-publish-chip:disabled {
-    cursor: default;
-    opacity: 0.72;
+  .compose-options-trigger:disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
   }
 
-  .compose-publish-chip-selected {
-    background-color: var(--compose-paper-bg);
-    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
-    color: var(--site-text-primary);
+  .compose-options-trigger:focus-visible {
+    outline: 2px solid
+      color-mix(in srgb, var(--site-text-primary) 22%, transparent);
+    outline-offset: 2px;
   }
 
-  .compose-publish-chip-label {
-    font-size: 0.875rem;
-    font-weight: var(--fw-medium);
-    letter-spacing: 0.005em;
-    line-height: 1.28;
+  .compose-options-trigger-icon {
+    width: 1.35rem;
+    height: 1.35rem;
   }
 
-  .compose-publish-chip-hint {
+  /* Sits on the field's label row, so it reads as an aside to that label rather
+     than a second thing to do. It only appears once there is a value to undo,
+     which is why it can afford to be this quiet. */
+  .compose-publish-section-action {
+    flex-shrink: 0;
+    padding: 0;
+    border: none;
+    background: none;
     color: var(--site-text-secondary);
-    font-size: var(--compose-panel-hint-size);
-    line-height: 1.45;
-    text-wrap: pretty;
+    font-size: 0.75rem;
+    line-height: 1.2;
+    text-underline-offset: 2px;
+    cursor: pointer;
+    transition: color 0.16s ease;
+  }
+
+  .compose-publish-section-action:hover {
+    color: var(--site-text-primary);
+    text-decoration: underline;
+  }
+
+  .compose-publish-section-action:focus-visible {
+    outline: 2px solid
+      color-mix(in srgb, var(--site-text-primary) 18%, transparent);
+    outline-offset: 3px;
+    border-radius: 4px;
   }
 
+  /* --- Visibility segmented control --------------------------------------- */
+
   .compose-publish-visibility-icon {
     display: inline-flex;
     align-items: center;
@@ -6712,6 +7252,7 @@
     text-align: left;
     font-size: var(--compose-panel-control-size);
     color: var(--site-text-primary);
+    text-decoration: none;
     transition: background-color 0.12s ease;
   }
 
@@ -6719,90 +7260,52 @@
     background-color: var(--compose-control-bg);
   }
 
+  .compose-dropdown-separator {
+    height: 1px;
+    margin: 4px 8px;
+    background-color: var(--compose-control-border);
+  }
+
+  /* One line, no card: a card holding a chip holding the slug was three nested
+     frames for what is a single tap-to-accept. */
   .compose-slug-suggestion {
-    display: grid;
-    grid-template-columns: minmax(0, 1fr) auto;
-    align-items: center;
-    gap: 0.65rem;
+    display: flex;
+    align-items: baseline;
+    gap: 0.4rem;
     width: 100%;
-    padding: 0.62rem 0.68rem;
-    border: 1px solid var(--compose-control-border);
-    border-radius: 10px;
-    background-color: color-mix(
-      in srgb,
-      var(--compose-control-bg) 72%,
-      var(--compose-paper-bg)
-    );
-    box-shadow:
-      inset 0 1px 0 color-mix(in srgb, var(--compose-paper-bg) 88%, transparent),
-      0 1px 2px rgba(0, 0, 0, 0.03);
+    margin: -0.05rem -0.35rem;
+    padding: 0.3rem 0.35rem;
+    border: none;
+    border-radius: 7px;
+    background: none;
     cursor: pointer;
     text-align: left;
-    transition:
-      background-color 0.16s ease,
-      border-color 0.16s ease,
-      transform 0.16s ease,
-      box-shadow 0.16s ease;
+    transition: background-color 0.16s ease;
   }
 
   .compose-slug-suggestion:hover {
-    border-color: color-mix(in srgb, var(--site-text-primary) 14%, transparent);
-    background-color: color-mix(
-      in srgb,
-      var(--compose-control-bg-strong) 78%,
-      var(--compose-paper-bg)
-    );
-    transform: translateY(-1px);
-    box-shadow:
-      inset 0 1px 0 color-mix(in srgb, var(--compose-paper-bg) 88%, transparent),
-      0 4px 14px rgba(0, 0, 0, 0.045);
+    background-color: var(--compose-control-bg);
   }
 
   .compose-slug-suggestion:focus-visible {
     outline: 2px solid
       color-mix(in srgb, var(--site-text-primary) 18%, transparent);
-    outline-offset: 2px;
-  }
-
-  .compose-slug-suggestion-copy {
-    min-width: 0;
-    display: flex;
-    align-items: center;
-    flex-wrap: wrap;
-    gap: 0.45rem;
+    outline-offset: 1px;
   }
 
   .compose-slug-suggestion-label {
+    flex-shrink: 0;
     color: var(--site-text-secondary);
-    font-size: var(--type-ui-micro);
-    font-weight: var(--fw-medium);
-    letter-spacing: 0.01em;
-    line-height: 1.2;
-  }
-
-  .compose-slug-suggestion-chip {
-    display: inline-flex;
-    align-items: center;
-    min-width: 0;
-    max-width: 100%;
-    padding: 0.25rem 0.48rem;
-    border-radius: 999px;
-    border: 1px solid var(--compose-control-border);
-    background-color: color-mix(
-      in srgb,
-      var(--compose-paper-bg) 92%,
-      var(--compose-control-bg)
-    );
-    box-shadow: inset 0 1px 0
-      color-mix(in srgb, var(--compose-paper-bg) 88%, transparent);
+    font-size: 0.75rem;
+    line-height: 1.3;
   }
 
   .compose-slug-suggestion-value {
-    display: block;
+    min-width: 0;
     color: var(--site-text-primary);
     font-size: var(--type-ui-caption);
     font-weight: var(--fw-medium);
-    line-height: 1.2;
+    line-height: 1.3;
     font-family:
       ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
       "Courier New", monospace;
@@ -6813,101 +7316,61 @@
 
   .compose-slug-suggestion-icon {
     display: inline-flex;
+    flex-shrink: 0;
     align-items: center;
-    justify-content: center;
-    width: 1.65rem;
-    height: 1.65rem;
-    border-radius: 999px;
-    background-color: color-mix(
-      in srgb,
-      var(--compose-paper-bg) 88%,
-      var(--compose-control-bg)
-    );
-    color: color-mix(
-      in srgb,
-      var(--site-text-primary) 72%,
-      var(--site-text-secondary)
-    );
+    margin-left: auto;
+    color: var(--site-text-secondary);
+    transform: translateY(0.1em);
     transition:
       transform 0.16s ease,
-      background-color 0.16s ease,
       color 0.16s ease;
   }
 
   .compose-slug-suggestion:hover .compose-slug-suggestion-icon {
-    transform: translateX(1px);
-    background-color: color-mix(
-      in srgb,
-      var(--compose-paper-bg) 66%,
-      var(--compose-control-bg-strong)
-    );
+    transform: translate(2px, 0.1em);
     color: var(--site-text-primary);
   }
 
-  .compose-publish-slug-field,
-  .compose-publish-date-field {
-    display: flex;
-    flex-direction: column;
-    gap: 0.55rem;
-  }
-
+  /* Scaled to the panel it sits in. The old field was 3rem tall with a 14px
+     radius, a gradient, an inset highlight and a drop shadow — more chrome than
+     the dialog's own controls carry. */
   .compose-publish-slug-input-wrap,
   .compose-publish-date-input-wrap {
     display: flex;
     align-items: center;
-    gap: 0.78rem;
-    min-height: 3rem;
-    padding: 0 0.95rem;
+    gap: 0.5rem;
+    min-height: 2.3rem;
+    padding: 0 0.6rem;
     border: 1px solid var(--compose-control-border);
-    border-radius: 14px;
-    background:
-      linear-gradient(
-        180deg,
-        color-mix(in srgb, var(--compose-paper-bg) 94%, transparent),
-        color-mix(in srgb, var(--compose-control-bg) 16%, transparent)
-      ),
-      color-mix(in srgb, var(--compose-paper-bg) 97%, var(--compose-control-bg));
-    box-shadow:
-      inset 0 1px 0 color-mix(in srgb, var(--compose-paper-bg) 92%, transparent),
-      0 1px 2px rgba(0, 0, 0, 0.02);
+    border-radius: 9px;
+    background-color: color-mix(
+      in srgb,
+      var(--compose-control-bg) 55%,
+      var(--compose-paper-bg)
+    );
     transition:
       border-color 0.16s ease,
-      background-color 0.16s ease,
       box-shadow 0.16s ease;
   }
 
   .compose-publish-slug-input-wrap:focus-within,
   .compose-publish-date-input-wrap:focus-within {
-    border-color: color-mix(in srgb, var(--site-text-primary) 16%, transparent);
-    background:
-      linear-gradient(
-        180deg,
-        color-mix(in srgb, var(--compose-paper-bg) 96%, transparent),
-        color-mix(in srgb, var(--compose-control-bg-strong) 24%, transparent)
-      ),
-      color-mix(
-        in srgb,
-        var(--compose-paper-bg) 96%,
-        var(--compose-control-bg-strong)
-      );
-    box-shadow:
-      inset 0 1px 0 color-mix(in srgb, var(--compose-paper-bg) 94%, transparent),
-      0 0 0 3px color-mix(in srgb, var(--site-text-primary) 6%, transparent);
+    border-color: color-mix(in srgb, var(--site-text-primary) 22%, transparent);
+    box-shadow: 0 0 0 3px
+      color-mix(in srgb, var(--site-text-primary) 7%, transparent);
+  }
+
+  /* The message under the field is red; the field it belongs to should say so
+     too, rather than leaving the reader to pair them up. */
+  .compose-publish-slug-input-wrap:has([aria-invalid="true"]),
+  .compose-publish-date-input-wrap:has([aria-invalid="true"]) {
+    border-color: color-mix(in srgb, var(--destructive) 42%, transparent);
   }
 
   .compose-publish-slug-prefix {
     flex-shrink: 0;
-    min-width: 1.25rem;
-    padding-right: 0.78rem;
-    border-right: 1px solid
-      color-mix(in srgb, var(--site-text-primary) 8%, transparent);
-    color: color-mix(
-      in srgb,
-      var(--site-text-primary) 52%,
-      var(--site-text-secondary)
-    );
-    font-size: var(--compose-panel-control-size);
-    font-weight: var(--fw-medium);
+    color: var(--site-text-secondary);
+    font-size: var(--type-ui-caption);
     line-height: 1;
     font-family:
       ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
@@ -6923,9 +7386,8 @@
     padding: 0;
     box-shadow: none;
     color: var(--site-text-primary);
-    font-size: var(--compose-inline-input-size);
-    font-weight: var(--fw-medium);
-    line-height: 1.35;
+    font-size: var(--type-ui-caption);
+    line-height: 1.4;
     font-family:
       ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
       "Courier New", monospace;
@@ -6935,13 +7397,56 @@
     font-family: inherit;
   }
 
+  /* The browser paints `yyyy-mm-dd` in the value's own colour, so an untouched
+     field reads as a date that was chosen. Only the empty state is dimmed. */
+  .compose-publish-date-input-empty::-webkit-datetime-edit {
+    color: var(--site-text-secondary);
+    opacity: 0.75;
+  }
+
+  /* Replaced by .compose-publish-date-picker, which drives the same picker from
+     a target the height of the field instead of a ~13px UA glyph. */
+  .compose-publish-date-input::-webkit-calendar-picker-indicator {
+    display: none;
+  }
+
+  .compose-publish-date-picker {
+    display: inline-grid;
+    flex-shrink: 0;
+    place-items: center;
+    width: 1.7rem;
+    height: 1.7rem;
+    margin-right: -0.35rem;
+    border: none;
+    border-radius: 7px;
+    background: transparent;
+    color: var(--site-text-secondary);
+    cursor: pointer;
+    transition:
+      background-color 0.16s ease,
+      color 0.16s ease;
+  }
+
+  .compose-publish-date-picker:hover {
+    background-color: var(--compose-control-bg-strong);
+    color: var(--site-text-primary);
+  }
+
+  .compose-publish-date-picker:focus-visible {
+    outline: 2px solid
+      color-mix(in srgb, var(--site-text-primary) 22%, transparent);
+    outline-offset: 1px;
+  }
+
+  .compose-publish-date-picker-icon {
+    width: 0.95rem;
+    height: 0.95rem;
+  }
+
   .compose-publish-slug-input::placeholder,
   .compose-publish-date-input::placeholder {
-    color: color-mix(
-      in srgb,
-      var(--site-text-secondary) 82%,
-      var(--compose-paper-bg)
-    );
+    color: var(--site-text-secondary);
+    opacity: 0.75;
   }
 
   .compose-publish-slug-input:focus,
@@ -6962,21 +7467,13 @@
     color: var(--destructive);
   }
 
+  /* The URL a slug resolves to is a confirmation, not a control — a bordered
+     box for it made a third framed thing in a panel with two fields. */
   .compose-publish-slug-preview {
-    display: flex;
-    flex-wrap: wrap;
-    align-items: baseline;
-    gap: 0.04rem;
-    padding: 0.48rem 0.62rem;
-    border-radius: 9px;
-    border: 1px solid var(--compose-control-border);
-    background-color: color-mix(
-      in srgb,
-      var(--compose-control-bg) 58%,
-      var(--compose-paper-bg)
-    );
-    font-size: var(--type-ui-caption);
-    line-height: 1.35;
+    margin: 0;
+    color: var(--site-text-secondary);
+    font-size: var(--type-ui-micro);
+    line-height: 1.4;
     word-break: break-word;
     font-family:
       ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
@@ -6984,19 +7481,11 @@
   }
 
   .compose-publish-slug-preview-origin {
-    color: color-mix(
-      in srgb,
-      var(--site-text-secondary) 92%,
-      var(--compose-paper-bg)
-    );
-    font-size: var(--type-ui-micro);
-    font-weight: var(--fw-normal);
+    opacity: 0.75;
   }
 
   .compose-publish-slug-preview-path {
     color: var(--site-text-primary);
-    font-size: var(--type-ui-caption);
-    font-weight: var(--fw-medium);
     overflow-wrap: anywhere;
   }
 
@@ -7095,10 +7584,13 @@
     transform: scale(1.02);
   }
 
+  /* Sized to be looked at, not to leave room for a pinned toolbar. Nothing
+     clips the dock any more, so a tall preview just makes `.compose-scroll`
+     longer. The dvh half keeps it from filling a short window on its own. */
   .compose-attachment-img {
     display: block;
     border-radius: var(--media-radius, 0.5rem);
-    max-height: min(160px, 18dvh);
+    max-height: min(420px, 46dvh);
     object-fit: contain;
   }
 
@@ -7155,7 +7647,7 @@
      cropped from the top (object-fit: cover) instead of shrinking to a sliver. */
   .compose-attachment:only-child .compose-attachment-img {
     max-width: 100%;
-    max-height: min(200px, 22dvh);
+    max-height: min(460px, 52dvh);
     min-width: 48px;
     object-fit: cover;
     object-position: center top;
@@ -7166,9 +7658,9 @@
     aspect-ratio: 4 / 3;
   }
 
-  /* Multiple images: fixed height, cover */
+  /* Multiple images: one shared height so the row reads as a strip, cover */
   .compose-attachment:not(:only-child) .compose-attachment-img {
-    height: 200px;
+    height: min(340px, 40dvh);
     width: auto;
     min-width: 120px;
     object-fit: cover;
@@ -7507,18 +7999,21 @@
     --compose-thread-padding-left: 16px;
     --compose-thread-padding-right: 16px;
     --compose-thread-gap: 12px;
-    --compose-thread-rail-left: calc(var(--compose-thread-padding-left) + 5px);
-    --site-thread-marker-surface: var(--compose-paper-bg);
+    /* Fixed track every rail child sits in and centres its circle inside, so the
+       line's x depends on the track alone and no dot size can pull it off centre.
+       The constant this replaced was half the *feed's* 10px marker and stayed
+       behind when compose dropped to 7px, leaving the line down the dot's edge. */
+    --compose-thread-rail-width: 10px;
+    --compose-thread-rail-left: calc(
+      var(--compose-thread-padding-left) + var(--compose-thread-rail-width) / 2
+    );
     display: flex;
     flex-direction: column;
-    flex: 1;
-    min-height: 0;
-    overflow: hidden;
     position: relative;
   }
 
   .compose-reply-compose-layout {
-    --compose-title-input-size: var(--type-content-subtitle);
+    --compose-title-input-size: calc(var(--type-content-body) * 1.2);
     --compose-title-input-leading: 1.35;
     --compose-quote-input-size: calc(var(--type-content-body) * 1.06);
     --compose-quote-input-leading: 1.42;
@@ -7541,8 +8036,9 @@
     width: 1.55rem;
   }
 
+  /* Height comes from the shared four-line floor, which already reads this
+     layout's own leading and type size — only the lead-in changes here. */
   .compose-reply-compose-layout .compose-quote-text {
-    min-height: 6.5rem;
     padding-top: 0.35rem;
   }
 
@@ -7557,187 +8053,147 @@
       left: 1rem;
       width: 1.6rem;
     }
-
-    .compose-reply-compose-layout .compose-quote-text {
-      min-height: 6.5rem;
-      padding-top: 0.35rem;
-    }
-  }
-
-  /* Continuous vertical line through the rail */
-  .compose-thread-layout::before {
-    content: "";
-    position: absolute;
-    left: var(--compose-thread-rail-left);
-    top: 0;
-    bottom: 0;
-    width: 1px;
-    background: linear-gradient(
-      180deg,
-      transparent 0,
-      color-mix(in srgb, var(--site-threadline) 85%, transparent) 8%,
-      color-mix(in srgb, var(--site-threadline) 55%, transparent) 100%
-    );
-    z-index: 0;
-  }
-
-  /* Row containing dot + reply context */
-  .compose-reply-row {
-    display: flex;
-    align-items: flex-start;
-    gap: var(--compose-thread-gap);
-    padding-right: var(--compose-thread-padding-right);
-    padding-left: var(--compose-thread-padding-left);
-  }
-
-  /* Row containing dot + editor */
-  .compose-editor-row {
-    display: flex;
-    align-items: flex-start;
-    gap: var(--compose-thread-gap);
-    padding-right: var(--compose-thread-padding-right);
-    padding-left: var(--compose-thread-padding-left);
-    flex: 1;
-    min-height: 0;
-    overflow: hidden;
   }
 
-  .compose-editor-row > jant-compose-editor {
-    flex: 1;
-    min-height: 0;
-    display: flex;
-    flex-direction: column;
-    align-self: stretch;
-    overflow: hidden;
+  /* The rail is drawn one row at a time rather than as a single strip down the
+     layout, so the two ends can be trimmed: it starts at the first dot and
+     stops at the last post's. Under the last post it used to keep going —
+     that's the tallest row in the layout, so it was a long line pointing at
+     nothing. */
+  /* Distance from a row's top edge to the centre of its dot: where the rail
+     has to start or stop, and where the dot itself has to land. The dot derives
+     its own margin from this pair (see `.compose-thread-dot`) rather than
+     restating it, so resizing the marker cannot drift the line off the dot. */
+  .compose-thread-layout > * {
     position: relative;
+    --compose-thread-row-padding-top: 0px;
+    --compose-thread-dot-center: calc(0.65rem + 5px);
   }
 
-  /* Reduce editor body left padding — the thread rail already provides indent */
-  .compose-editor-row .compose-body {
-    padding-left: 0;
-  }
-
-  .compose-editor-row .compose-attachments-dock {
-    flex: 0 1 auto;
-    min-height: 0;
-    max-height: min(240px, 34dvh);
-    overflow-y: auto;
-    padding-inline: 0;
-    background: transparent;
+  .compose-thread-layout > .compose-editor-row {
+    --compose-thread-row-padding-top: 14px;
+    --compose-thread-dot-center: calc(14px + 1rem + 7px);
   }
 
-  .compose-reply-compose-layout .compose-editor-row .compose-attachments-dock {
-    --compose-reply-attachment-width: 96px;
-    --compose-reply-attachment-height: 72px;
-
-    max-height: min(116px, 18dvh);
-    padding-block: 4px 2px;
+  .compose-thread-compose-layout > .compose-editor-row {
+    --compose-thread-row-padding-top: 4px;
+    --compose-thread-dot-center: calc(4px + 1.05rem + 7px);
   }
 
-  .compose-reply-compose-layout .compose-editor-row .compose-attachments {
-    gap: 6px;
-    padding-block: 0;
+  .compose-thread-layout > *::before {
+    content: "";
+    position: absolute;
+    left: var(--compose-thread-rail-left);
+    top: 0;
+    bottom: 0;
+    width: var(--site-thread-rail-line-width);
+    margin-left: calc(var(--site-thread-rail-line-width) / -2);
+    border-radius: 1px;
+    /* Matched to the weight of the reading rail's gradient rather than its
+       implementation. That one runs 85% → 55% down its length, so ~70% flat
+       reads at the same strength here. It can't literally share the gradient:
+       this rail is drawn per row so both ends can be trimmed, and a per-row
+       gradient would fade in once per post instead of once per thread. */
+    background-color: color-mix(
+      in srgb,
+      var(--site-threadline) 70%,
+      transparent
+    );
   }
 
-  .compose-reply-compose-layout .compose-editor-row .compose-attachment {
-    gap: 2px;
-    max-width: none;
+  .compose-thread-layout > :first-child::before {
+    top: var(--compose-thread-dot-center);
   }
 
-  .compose-reply-compose-layout
-    .compose-editor-row
-    .compose-attachment:has(.compose-attachment-preview-fallback) {
-    width: var(--compose-reply-attachment-width);
+  /* The last post ends the rail. `.compose-thread-add-row` sits below it and is
+     a placeholder, not a post, so its dashed dot is left unconnected. */
+  .compose-thread-layout
+    > .compose-editor-row:not(:has(~ .compose-editor-row))::before {
+    bottom: auto;
+    height: var(--compose-thread-dot-center);
   }
 
-  .compose-reply-compose-layout
-    .compose-editor-row
-    .compose-attachment:only-child
-    .compose-attachment-img,
-  .compose-reply-compose-layout
-    .compose-editor-row
-    .compose-attachment:not(:only-child)
-    .compose-attachment-img {
-    width: var(--compose-reply-attachment-width);
-    height: var(--compose-reply-attachment-height);
-    min-width: 0;
-    max-width: var(--compose-reply-attachment-width);
-    max-height: var(--compose-reply-attachment-height);
-    object-fit: cover;
-    object-position: center;
+  .compose-thread-layout > .compose-thread-add-row::before {
+    display: none;
   }
 
-  .compose-reply-compose-layout
-    .compose-editor-row
-    .compose-attachment-preview-fallback,
-  .compose-reply-compose-layout
-    .compose-editor-row
-    .compose-attachment-processing {
-    width: var(--compose-reply-attachment-width);
-    height: var(--compose-reply-attachment-height);
-    aspect-ratio: auto;
+  /* Row containing dot + reply context */
+  .compose-reply-row {
+    display: flex;
+    align-items: flex-start;
+    gap: var(--compose-thread-gap);
+    padding-right: var(--compose-thread-padding-right);
+    padding-left: var(--compose-thread-padding-left);
   }
 
-  .compose-reply-compose-layout
-    .compose-editor-row
-    .compose-attachment-preview-fallback
-    svg {
-    width: 28px;
-    height: 28px;
-  }
+  /* Row containing dot + editor */
+  .compose-editor-row {
+    /* The rail already indents this row from outside the editor, so nothing
+       inside it adds a gutter of its own. */
+    --compose-gutter: 0px;
 
-  .compose-reply-compose-layout
-    .compose-editor-row
-    .compose-attachment-file-card,
-  .compose-reply-compose-layout
-    .compose-editor-row
-    .compose-attachment:not(:only-child)
-    .compose-attachment-file-card {
-    width: 112px;
-    height: var(--compose-reply-attachment-height);
-    gap: 4px;
-    padding: 8px 10px;
+    display: flex;
+    align-items: flex-start;
+    gap: var(--compose-thread-gap);
+    padding-right: var(--compose-thread-padding-right);
+    padding-left: var(--compose-thread-padding-left);
+    padding-top: 4px;
+    padding-bottom: 4px;
   }
 
-  .compose-reply-compose-layout .compose-editor-row .compose-attachment-alt {
-    padding: 1px 3px;
-    font-size: var(--type-ui-micro);
-    line-height: 1.2;
+  /* `flex: 1` here is horizontal — it claims the width left by the rail dot.
+     The row's height comes from the editor's own content; nothing in this
+     chain clips or scrolls, that is `.compose-scroll`'s job. */
+  .compose-editor-row > jant-compose-editor {
+    flex: 1;
+    min-width: 0;
+    display: flex;
+    flex-direction: column;
+    position: relative;
   }
 
-  .compose-reply-compose-layout .compose-editor-row .compose-attachment-remove {
-    top: 4px;
-    right: 4px;
-    width: 20px;
-    height: 20px;
+  .compose-editor-row .compose-attachments-dock {
+    padding-inline-end: 0;
+    background: transparent;
   }
 
-  /* Dot marker for thread positions */
+  /* Dot marker for thread positions. Sits above the rail so it reads as a joint
+     in the line, and takes its offset from the row's declared dot centre so the
+     two ends of the rail always meet it. The element is the full rail track and
+     only centres the circle inside it, which is what keeps the line through the
+     dot's middle no matter how the marker is resized. */
   .compose-thread-dot {
-    width: var(--site-thread-marker-size);
+    position: relative;
+    z-index: 1;
+    display: flex;
+    justify-content: center;
+    width: var(--compose-thread-rail-width);
     height: var(--site-thread-marker-size);
-    margin-top: 0.65rem;
-    border-radius: 50%;
-    border: var(--site-thread-marker-border-width) solid
-      var(--site-thread-marker-surface);
-    background-color: var(--site-threadline);
+    margin-top: calc(
+      var(--compose-thread-dot-center) - var(--compose-thread-row-padding-top) -
+        var(--site-thread-marker-size) / 2
+    );
     flex-shrink: 0;
     align-self: flex-start;
-    box-shadow: 0 0 0 var(--site-thread-marker-ring-width)
-      var(--site-thread-dot-ring);
-    z-index: 1;
   }
 
-  .compose-editor-row .compose-thread-dot {
-    margin-top: 1rem;
-    margin-left: calc(
-      (var(--site-thread-marker-size) - var(--site-thread-marker-hero-size)) / 2
-    );
+  .compose-thread-dot::before {
+    content: "";
+    width: var(--site-thread-marker-size);
+    height: var(--site-thread-marker-size);
+    border-radius: 50%;
+    background-color: var(--site-threadline);
+    box-shadow: 0 0 0 var(--site-thread-marker-gap)
+      var(--site-thread-marker-surface);
+    transition: background-color 0.15s ease;
   }
 
-  /* In thread compose mode, dot aligns with the post header row */
-  .compose-thread-compose-layout .compose-editor-row .compose-thread-dot {
-    margin-top: 1.05rem;
+  /* Every post in a thread is equally new, so accenting all of them says nothing
+     — it just makes the rail loud. The accent marks where you are on the chain
+     instead: the one post holding the cursor. The reply context above stays on
+     the line's own colour. */
+  .compose-editor-row.is-current .compose-thread-dot::before {
+    background-color: var(--site-thread-marker-current);
   }
 
   .compose-reply-context {
@@ -7747,12 +8203,15 @@
     overflow: hidden;
     position: relative;
     padding: 0.08rem 0 0.18rem;
-    transition: max-height 0.3s ease;
   }
 
+  /* "Show more" means show it: expanding hands the post its full height rather
+     than a taller box with a second scrollbar in it. That inner scrollbar is
+     what made the parent's pictures thumbnails — there was never room for one
+     at full size. Length is the toggle's job now, not the preview's. */
   .compose-reply-context.expanded {
-    max-height: min(400px, 35dvh);
-    overflow-y: auto;
+    max-height: none;
+    overflow: visible;
   }
 
   .compose-reply-context-body {
@@ -7807,21 +8266,26 @@
     background-color: transparent;
   }
 
+  /* The parent reads at the same scale as the reply being written — the same
+     ceiling as `.compose-attachment-img`, the same radius token — so the two
+     halves of the exchange look like the same material. This is the only size
+     rule for pictures in the context: it covers both the ones inside the post's
+     own HTML and the media strip below it, which sits in here too. */
   .compose-reply-context-body img,
   .compose-reply-context-body video {
     width: auto !important;
     height: auto !important;
-    max-height: 120px;
-    border-radius: 6px;
+    max-height: min(420px, 46dvh);
+    border-radius: var(--media-radius, 0.5rem);
     object-fit: contain;
     background-image: none !important;
   }
 
   .compose-reply-context-media {
     display: flex;
-    gap: 6px;
+    gap: 8px;
     flex-wrap: wrap;
-    margin-top: 6px;
+    margin-top: 8px;
   }
 
   .compose-reply-context-media-link {
@@ -7829,12 +8293,6 @@
     cursor: pointer;
   }
 
-  .compose-reply-context-media-img {
-    max-height: 80px;
-    border-radius: 6px;
-    object-fit: contain;
-  }
-
   .compose-reply-fade {
     position: absolute;
     bottom: 0;
@@ -7852,7 +8310,8 @@
     padding-top: 4px;
     padding-right: var(--compose-thread-padding-right);
     padding-left: calc(
-      var(--compose-thread-padding-left) + var(--compose-thread-gap) + 10px
+      var(--compose-thread-padding-left) + var(--compose-thread-gap) +
+        var(--compose-thread-rail-width)
     );
     font-size: var(--type-thread-context-meta);
     color: var(--site-text-secondary);
@@ -7952,14 +8411,26 @@
       padding: 0.78rem 0.9rem;
     }
 
-    .compose-collection-trigger {
-      min-height: 2.65rem;
-      padding-right: 0.82rem;
+    /* Touch keeps the roomier set: the reference's 36px box is tuned for a
+       cursor, and a thumb needs the millimetres back. Width still comes from
+       the word — only the box around it grows. */
+    .compose-publish-main {
+      min-height: 2.8em;
+      padding-inline: 22px;
     }
 
-    .compose-collection-trigger-icon {
-      width: 1.75rem;
-      height: 1.75rem;
+    .compose-options-trigger {
+      width: 2.5rem;
+      height: 2.5rem;
+    }
+
+    .compose-collection-select {
+      --compose-collection-pad-icon: 0.68rem;
+      --compose-collection-pad-label: 0.85rem;
+    }
+
+    .compose-collection-trigger {
+      min-height: 2.5rem;
     }
 
     .compose-collection-select [data-popover] {
@@ -7967,13 +8438,24 @@
       max-width: min(20rem, calc(100vw - 1rem));
     }
 
+    .compose-collection-search-icon {
+      width: 1.15rem;
+      height: 1.15rem;
+    }
+
+    .compose-collection-options {
+      max-height: 15rem;
+    }
+
     .compose-collection-popover {
       padding: 0.62rem 0.68rem 0.58rem;
     }
 
     .compose-collection-search-shell {
+      gap: 0.52rem;
       min-height: 3rem;
       padding: 0 1rem;
+      border-radius: 0.92rem;
     }
 
     .compose-collection-options {
@@ -7992,12 +8474,20 @@
       height: 1.5rem;
     }
 
-    .compose-thread-layout {
-      padding-top: 0.75rem;
+    .compose-collection-add-action {
+      gap: 0.82rem;
+      min-height: 3rem;
+      padding: 0 0.92rem;
+      border-radius: 1rem;
+    }
+
+    .compose-collection-footer {
+      margin-top: 0.35rem;
+      padding: 0.35rem 0.22rem 0.12rem;
     }
 
-    .compose-thread-layout::before {
-      top: 0.75rem;
+    .compose-thread-layout {
+      padding-top: 0.75rem;
     }
 
     .compose-reply-context {
@@ -8020,35 +8510,14 @@
     }
   }
 
-  /* --- Thread compose layout (multi-post, scrollable) --------------------- */
-
-  /* Scrollable variant for composing a new thread (vs reply thread which is
-     fixed-height). Each editor item grows naturally; the whole layout scrolls. */
-  .compose-thread-compose-layout {
-    overflow-y: auto;
-    overflow-x: hidden;
-  }
-
-  .compose-thread-compose-layout .compose-editor-row {
-    flex: none;
-    overflow: visible;
-    align-items: flex-start;
-    padding-top: 4px;
-    padding-bottom: 4px;
-  }
-
-  .compose-thread-compose-layout .compose-editor-row > jant-compose-editor {
-    overflow: visible;
-    min-width: 0;
-  }
+  /* --- Thread compose layout (multi-post) --------------------------------- */
 
-  .compose-thread-compose-layout .compose-body {
-    flex: none;
-    overflow-y: visible;
-    min-height: 72px;
-  }
+  /* `.compose-thread-compose-layout` carries no layout rules of its own: the
+     grow-naturally-and-scroll-as-one behaviour it used to opt into is now what
+     every mode does, under `.compose-scroll`. It survives as a hook for the
+     rail geometry above.
 
-  /* Focused thread post gets a subtle left accent. Use an inset box-shadow, not
+     Focused thread post gets a subtle left accent. Use an inset box-shadow, not
      a border: a border adds 2px of layout width only while focused, so switching
      focus between thread posts shifted each one sideways ("jitter"). box-shadow
      paints in the same spot without affecting layout. */
@@ -8056,7 +8525,8 @@
     box-shadow: inset 2px 0 0 transparent;
   }
 
-  /* "Add to thread" row inside thread compose layout */
+  /* "Add to thread" on the rail — thread compose, and a reply before it has
+     grown a second post. */
   .compose-thread-add-row {
     display: flex;
     align-items: center;
@@ -8067,92 +8537,63 @@
     padding-bottom: 10px;
   }
 
+  /* Fills the rail track exactly, so it lands on the same centre line as the
+     post dots without any offset of its own. */
   .compose-thread-add-dot {
-    width: 10px;
-    height: 10px;
+    width: var(--compose-thread-rail-width);
+    height: var(--compose-thread-rail-width);
     border-radius: 50%;
     border: 1.5px dashed
       color-mix(in srgb, var(--site-threadline) 60%, transparent);
     flex-shrink: 0;
     margin-top: 1px;
-    margin-left: calc(
-      (var(--site-thread-marker-hero-size) - var(--site-thread-marker-size)) / 2
-    );
-  }
-
-  .compose-thread-add-btn {
-    display: inline-flex;
-    align-items: center;
-    gap: 6px;
-    font-size: var(--type-ui-caption);
-    font-family: var(--font-ui);
-    color: var(--site-text-secondary);
-    padding: 4px 12px 4px 9px;
-    border-radius: 20px;
-    border: 1.5px dashed
-      color-mix(in srgb, var(--site-threadline) 70%, transparent);
-    background: transparent;
-    cursor: pointer;
-    transition:
-      color 0.15s ease,
-      background-color 0.15s ease,
-      border-color 0.15s ease;
-  }
-
-  .compose-thread-compose-layout .compose-thread-add-btn {
-    margin-inline-start: -8px;
-  }
-
-  .compose-thread-add-btn:hover:not(:disabled) {
-    color: var(--site-text-primary);
-    background-color: var(--compose-control-bg);
-    border-color: var(--site-threadline);
-    border-style: solid;
-  }
-
-  .compose-thread-add-btn:disabled,
-  .compose-add-thread-btn:disabled {
-    opacity: 0.4;
-    cursor: default;
   }
 
-  /* "Add to thread" trigger below single-post editor */
+  /* "Add to thread" trigger with no rail under it — a single post, which has
+     no next slot to point at yet. */
   .compose-add-thread-trigger {
-    padding: 1px 10px 4px;
+    padding: 1px 10px 4px var(--compose-gutter);
     display: flex;
     align-items: center;
   }
 
   @media (min-width: 700px) {
     .compose-add-thread-trigger {
-      padding-inline: 16px;
+      padding-inline: var(--compose-gutter) 16px;
     }
   }
 
-  .compose-add-thread-btn {
+  /* No glyph of its own: on the rail the dashed dot already says "next slot",
+     and on a single post the row's position says it. The label is all that is
+     left, so it sits at the row's own quiet weight — and hangs back by its own
+     side padding so the label, not the hover chip, starts on the text column. */
+  .compose-thread-add-btn {
+    --compose-add-hang: 8px;
+
     display: inline-flex;
     align-items: center;
-    gap: 6px;
     font-size: var(--type-ui-caption);
     font-family: var(--font-ui);
     color: var(--site-text-secondary);
-    padding: 4px 12px 4px 9px;
-    border-radius: 20px;
-    border: 1.5px dashed
-      color-mix(in srgb, var(--site-threadline) 70%, transparent);
+    padding: 5px var(--compose-add-hang);
+    margin-inline-start: calc(-1 * var(--compose-add-hang));
+    border-radius: 9px;
+    border: none;
     background: transparent;
     cursor: pointer;
     transition:
       color 0.15s ease,
-      background-color 0.15s ease,
-      border-color 0.15s ease;
+      background-color 0.15s ease;
   }
 
-  .compose-add-thread-btn:hover:not(:disabled) {
+  .compose-thread-add-btn:hover:not(:disabled) {
     color: var(--site-text-primary);
     background-color: var(--compose-control-bg);
-    border-color: var(--site-threadline);
-    border-style: solid;
+  }
+
+  .compose-thread-add-btn:disabled {
+    opacity: 0.4;
+    cursor: default;
   }
 
   /* --- Thread post header: format tag switcher + × on right --------------- */
@@ -8160,8 +8601,45 @@
   .compose-thread-post-header {
     display: flex;
     align-items: center;
-    justify-content: space-between;
-    padding: 6px 0 4px;
+    /* The format selector will not shrink, so on a narrow screen let the
+       date/permalink pill drop to its own line rather than clip. */
+    flex-wrap: wrap;
+    row-gap: 4px;
+    gap: 8px;
+    /* Left is the shared text column: the switcher hangs back out of it by its
+       own item padding, so it is the label that starts on the edge. Right keeps
+       the tools row's 16px so × and the date pill stay over the tool buttons
+       bracketing the editor from below. */
+    padding: 10px 16px 2px var(--compose-gutter);
+  }
+
+  .compose-editor-row .compose-thread-post-header {
+    padding-block: 6px 4px;
+  }
+
+  /* "1/3" position marker. Identity comes before attribute, so it leads the
+     row; it pairs visually with the thread rail dot to its left. */
+  .compose-post-position {
+    flex-shrink: 0;
+    padding: 1px 7px;
+    border-radius: 999px;
+    background: var(--compose-control-bg);
+    color: var(--site-text-secondary);
+    font-size: 0.68rem;
+    font-variant-numeric: tabular-nums;
+    letter-spacing: 0.01em;
+  }
+
+  /* "Editing" — the one thing a compose title ever said that you could not read
+     off the composer itself: this post is already live. New / reply / thread
+     all announce themselves through the parent post, the 2/3 markers and the
+     submit label, so only this case earns a word.
+     It takes the position marker's weight rather than an accent tint: it sits
+     in that marker's slot, and everything else in this row that is not the
+     format selector is deliberately quiet. Only the numerals are reset. */
+  .compose-post-badge {
+    font-variant-numeric: normal;
+    letter-spacing: 0.02em;
   }
 
   /* Reply / edit-reply compose (a .compose-editor-row directly under
@@ -8176,7 +8654,8 @@
     padding-top: 14px;
   }
 
-  .compose-thread-post-header + .compose-body {
+  /* The header now sits above every post, so it owns the gap to the body. */
+  .compose-editor-row .compose-thread-post-header + .compose-body {
     padding-top: 8px;
   }
 
@@ -8184,55 +8663,12 @@
     padding-top: 12px;
   }
 
-  /* Thread format selector: pill-tag style (lighter than the main segmented) */
-  .compose-thread-segmented {
-    background: transparent;
-    box-shadow: none;
-    padding: 0;
-    gap: 4px;
-  }
-
-  .compose-thread-segmented .compose-format-pill {
-    display: none;
-  }
-
-  .compose-thread-segmented .compose-segmented-item {
-    flex: none;
-    font-size: var(--type-ui-caption);
-    padding: 3px 10px;
-    border-radius: 20px;
-    border: 1.5px solid
-      color-mix(in srgb, var(--site-text-secondary) 22%, transparent);
-    letter-spacing: 0.01em;
-    transition:
-      border-color 0.15s ease,
-      color 0.15s ease,
-      background-color 0.15s ease;
-  }
-
-  .compose-thread-segmented
-    .compose-segmented-item:hover:not(.compose-segmented-item-active) {
-    border-color: color-mix(
-      in srgb,
-      var(--site-text-secondary) 50%,
-      transparent
-    );
-    color: var(--site-text-primary);
-    background: transparent;
-  }
-
-  .compose-thread-segmented .compose-segmented-item-active {
-    color: var(--site-text-primary);
-    font-weight: var(--fw-medium);
-    border-color: color-mix(in srgb, var(--site-text-primary) 55%, transparent);
-    background: color-mix(in srgb, var(--site-text-primary) 7%, transparent);
-  }
-
   /* Remove button (×) — hidden by default, revealed on thread post hover/focus */
   .compose-thread-post-remove {
     display: inline-flex;
     align-items: center;
     justify-content: center;
+    margin-left: auto;
     width: 28px;
     height: 28px;
     border-radius: 8px;
@@ -8262,11 +8698,6 @@
     color: var(--site-text-primary);
   }
 
-  /* In thread compose, toolbar padding matches thread indent */
-  .compose-thread-compose-layout .compose-tools-row {
-    padding-inline-start: 0;
-  }
-
   /* --- Alt text overlay panel (Threads-style, covers entire dialog) ------- */
 
   .compose-alt-panel {
@@ -8438,11 +8869,18 @@
   }
 
   .compose-draft-meta {
+    display: flex;
+    align-items: center;
+    gap: 0.35rem;
     font-size: var(--type-ui-caption);
     color: var(--site-text-secondary);
     margin-top: 4px;
   }
 
+  .compose-draft-format {
+    font-weight: 500;
+  }
+
   .compose-draft-more {
     width: 40px;
     height: 40px;
@@ -8933,9 +9371,17 @@
     min-height: 0;
   }
 
+  /* The floor is two lines, written as two lines. It is a target to click into
+     on an empty post, not a reserved shape, so it should follow the type
+     instead of a pixel count that goes stale when the leading moves. Every
+     compose text surface shares it: a note's body and the "thoughts" under a
+     link or a quote all open the same way and grow from there. */
   .compose-tiptap-body .tiptap {
     outline: none;
-    min-height: 120px;
+    min-height: calc(var(--type-body-leading) * 2em);
+    min-width: 0;
+    max-width: 100%;
+    overflow-x: auto;
     font-size: var(--type-content-body);
     line-height: var(--type-body-leading);
     letter-spacing: var(--type-body-tracking);
@@ -8948,14 +9394,6 @@
     line-height: var(--type-body-leading);
   }
 
-  .compose-tiptap-thoughts .tiptap {
-    min-height: 72px;
-  }
-
-  .compose-tiptap-thoughts-quote .tiptap {
-    min-height: 56px;
-  }
-
   .compose-tiptap-link .tiptap {
     color: var(--site-text-primary);
   }
@@ -9016,37 +9454,77 @@
     margin-bottom: 1rem;
   }
 
-  /* In inline-format compose (reply / edit-reply / thread — the editors wrapped
-     in .compose-editor-row), the format header sits right above the body, so the
-     first block's 1.4rem top margin reads as a gap between the format pills and
-     the input. Drop it there so the text hugs the header. Standalone new/edit
-     editors keep their natural lead-in. */
-  .compose-editor-row .compose-tiptap-body .tiptap > :first-child {
+  /* The first block's 1.4rem top margin is a lead-in that only made sense when
+     the body was the first thing in the editor. Every editor now renders a
+     format header above it — and notes a title field too — so it reads as a gap
+     instead. (This used to be scoped to .compose-editor-row, back when
+     standalone new/edit editors did start with the body.) */
+  .compose-tiptap-body .tiptap > :first-child {
     margin-top: 0;
   }
 
   .compose-tiptap-body .tiptap ul {
     list-style-type: disc;
+    padding-left: 1.4em;
+    margin: 1.25em 0;
+  }
+
+  .compose-tiptap-body .tiptap ol {
+    list-style-type: decimal;
+    /* Keep multi-digit markers inside the editor's scrollable bounds. */
+    padding-left: 2.25em;
+    margin: 1.25em 0;
+  }
+
+  .compose-tiptap-body .tiptap :is(ul, ol) :is(ul, ol) {
     padding-left: 1.5em;
-    margin: 0.25em 0;
+    margin: 0.4em 0;
+  }
+
+  .compose-tiptap-body .tiptap ul ul {
+    list-style-type: circle;
+  }
+
+  .compose-tiptap-body .tiptap ul ul ul {
+    list-style-type: square;
+  }
+
+  .compose-tiptap-body .tiptap ol ol {
+    list-style-type: lower-alpha;
+  }
+
+  .compose-tiptap-body .tiptap ol ol ol {
+    list-style-type: lower-roman;
+  }
+
+  .compose-tiptap-body .tiptap li {
+    margin: 0.5em 0;
+  }
+
+  .compose-tiptap-body .tiptap li > p:first-child {
+    margin-top: 0;
   }
 
-  .compose-tiptap-body .tiptap ol {
-    list-style-type: decimal;
-    padding-left: 1.5em;
-    margin: 0.25em 0;
+  .compose-tiptap-body .tiptap li > p:last-child {
+    margin-bottom: 0;
   }
 
-  .compose-tiptap-body .tiptap li {
-    margin: 0.15em 0;
+  /* A nested list makes its leading paragraph no longer the last child, so
+     clear the body-paragraph margin that would otherwise separate the levels. */
+  .compose-tiptap-body .tiptap li > p:has(+ :is(ul, ol)),
+  .compose-tiptap-body
+    .tiptap
+    li
+    > p:has(+ .ProseMirror-gapcursor + :is(ul, ol)) {
+    margin-bottom: 0;
   }
 
   .compose-tiptap-body .tiptap blockquote {
     --_blockquote-bg: var(--compose-blockquote-bg);
     --_blockquote-text: var(--compose-blockquote-text);
     position: relative;
-    margin: 0.72em 0;
-    padding: 1.3rem 0.9em 0.76em 1em;
+    margin: 1.4rem 0;
+    padding: 1.4rem 1rem 0.75rem;
     border: none;
     border-radius: 6px;
     background: var(--_blockquote-bg);
@@ -9061,6 +9539,35 @@
       color 0.18s ease;
   }
 
+  /* Reply compose deliberately stays denser than ordinary authored prose. */
+  .compose-reply-compose-layout .compose-tiptap-body .tiptap ul {
+    padding-left: 1.5em;
+    margin: 0.25em 0;
+  }
+
+  .compose-reply-compose-layout .compose-tiptap-body .tiptap ol {
+    padding-left: 2.25em;
+    margin: 0.25em 0;
+  }
+
+  .compose-reply-compose-layout
+    .compose-tiptap-body
+    .tiptap
+    :is(ul, ol)
+    :is(ul, ol) {
+    padding-left: 1.5em;
+    margin: 0.2em 0;
+  }
+
+  .compose-reply-compose-layout .compose-tiptap-body .tiptap li {
+    margin: 0.15em 0;
+  }
+
+  .compose-reply-compose-layout .compose-tiptap-body .tiptap blockquote {
+    margin: 0.72em 0;
+    padding: 1.3rem 0.9em 0.76em 1em;
+  }
+
   /* CJK: no italic for blockquotes (no true italic glyph) */
   :lang(zh) .compose-tiptap-body .tiptap blockquote,
   :lang(ja) .compose-tiptap-body .tiptap blockquote,
@@ -9141,9 +9648,9 @@
 
   .compose-tiptap-body .tiptap table {
     border-collapse: collapse;
-    width: 100%;
+    width: max-content;
+    min-width: 100%;
     margin: 0.75em 0;
-    overflow: hidden;
   }
 
   .compose-tiptap-body .tiptap td,
@@ -9151,7 +9658,7 @@
     border: 1px solid var(--site-divider);
     padding: 0.4em 0.6em;
     vertical-align: top;
-    min-width: 1em;
+    min-width: 6rem;
     position: relative;
   }
 
@@ -9164,6 +9671,211 @@
     background: oklch(from var(--site-accent) l c h / 0.12);
   }
 
+  /* Contextual table toolbar — deliberately quieter than the text bubble menu. */
+  .tiptap-table-controls {
+    position: fixed;
+    z-index: 10001;
+    align-items: center;
+    gap: 2px;
+    padding: 3px;
+    border: 1px solid color-mix(in srgb, var(--site-divider) 58%, transparent);
+    border-radius: 11px;
+    background: color-mix(
+      in srgb,
+      var(--site-elevated-bg) 96%,
+      var(--site-nav-hover-bg) 4%
+    );
+    box-shadow:
+      0 10px 24px oklch(from var(--site-text-primary) l c h / 0.07),
+      0 2px 5px oklch(from var(--site-text-primary) l c h / 0.035);
+  }
+
+  .tiptap-table-control-btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 2rem;
+    height: 2rem;
+    border-radius: 8px;
+    color: var(--site-text-secondary);
+    cursor: pointer;
+    transition:
+      color 0.15s ease,
+      background-color 0.15s ease;
+  }
+
+  .tiptap-table-control-btn:hover,
+  .tiptap-table-control-btn:focus-visible,
+  .tiptap-table-control-btn[aria-expanded="true"] {
+    color: var(--site-text-primary);
+    background: color-mix(
+      in srgb,
+      var(--site-nav-hover-bg) 78%,
+      var(--site-elevated-bg) 22%
+    );
+  }
+
+  .tiptap-table-control-btn:focus-visible,
+  .tiptap-table-menu-item:focus-visible,
+  .tiptap-table-size-cell:focus-visible {
+    outline: 2px solid color-mix(in srgb, var(--site-accent) 72%, transparent);
+    outline-offset: 1px;
+  }
+
+  .tiptap-table-control-btn:disabled,
+  .tiptap-table-menu-item:disabled {
+    opacity: 0.35;
+    cursor: not-allowed;
+  }
+
+  .tiptap-table-options {
+    position: absolute;
+    top: calc(100% + 6px);
+    left: 50%;
+    width: min(13.5rem, calc(100vw - 20px));
+    padding: 5px;
+    border: 1px solid color-mix(in srgb, var(--site-divider) 58%, transparent);
+    border-radius: 12px;
+    background: var(--site-elevated-bg);
+    box-shadow:
+      0 14px 28px oklch(from var(--site-text-primary) l c h / 0.08),
+      0 2px 6px oklch(from var(--site-text-primary) l c h / 0.04);
+    transform: translateX(-50%);
+  }
+
+  .tiptap-table-options[hidden] {
+    display: none;
+  }
+
+  .tiptap-table-menu-item {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    min-height: 2.25rem;
+    padding: 0.45rem 0.65rem;
+    border-radius: 8px;
+    color: var(--site-text-primary);
+    font-size: var(--type-sm);
+    line-height: 1.25;
+    text-align: left;
+    cursor: pointer;
+  }
+
+  .tiptap-table-menu-item:hover,
+  .tiptap-table-menu-item:focus-visible {
+    background: var(--site-nav-hover-bg);
+  }
+
+  .tiptap-table-menu-item.is-destructive {
+    color: var(--destructive);
+  }
+
+  .tiptap-table-options-separator {
+    height: 1px;
+    margin: 4px 5px;
+    background: color-mix(in srgb, var(--site-divider) 58%, transparent);
+  }
+
+  /* Slash-command table size picker. */
+  .tiptap-table-size-picker {
+    position: fixed;
+    z-index: 10002;
+    width: min(17rem, calc(100vw - 20px));
+    padding: 10px;
+    border: 1px solid color-mix(in srgb, var(--site-divider) 58%, transparent);
+    border-radius: 13px;
+    background: linear-gradient(
+      180deg,
+      color-mix(
+          in srgb,
+          var(--site-elevated-bg) 96%,
+          var(--site-nav-hover-bg) 4%
+        )
+        0%,
+      var(--site-elevated-bg) 100%
+    );
+    box-shadow:
+      0 14px 30px oklch(from var(--site-text-primary) l c h / 0.08),
+      0 2px 6px oklch(from var(--site-text-primary) l c h / 0.035);
+  }
+
+  .tiptap-table-size-picker-header {
+    display: flex;
+    align-items: baseline;
+    justify-content: space-between;
+    gap: 1rem;
+    padding: 0 2px 8px;
+    color: var(--site-text-secondary);
+    font-size: var(--type-xs);
+    font-weight: var(--fw-medium);
+  }
+
+  .tiptap-table-size-picker-dimensions {
+    color: var(--site-text-primary);
+    font-variant-numeric: tabular-nums;
+  }
+
+  .tiptap-table-size-grid {
+    display: grid;
+    gap: 3px;
+  }
+
+  .tiptap-table-size-grid-row {
+    display: grid;
+    grid-template-columns: repeat(8, minmax(0, 1fr));
+    gap: 3px;
+  }
+
+  .tiptap-table-size-cell {
+    aspect-ratio: 1;
+    min-width: 0;
+    border: 1px solid color-mix(in srgb, var(--site-divider) 68%, transparent);
+    border-radius: 4px;
+    background: color-mix(
+      in srgb,
+      var(--site-elevated-bg) 90%,
+      var(--site-nav-hover-bg) 10%
+    );
+    cursor: pointer;
+    transition:
+      border-color 0.1s ease,
+      background-color 0.1s ease,
+      transform 0.1s ease;
+  }
+
+  .tiptap-table-size-cell.is-selected {
+    border-color: color-mix(
+      in srgb,
+      var(--site-accent) 38%,
+      var(--site-divider)
+    );
+    background: color-mix(
+      in srgb,
+      var(--site-accent) 14%,
+      var(--site-elevated-bg)
+    );
+  }
+
+  .tiptap-table-size-cell.is-current {
+    border-color: color-mix(
+      in srgb,
+      var(--site-accent) 72%,
+      var(--site-divider)
+    );
+    transform: scale(0.9);
+  }
+
+  @media (pointer: coarse) {
+    .tiptap-table-control-btn {
+      width: 2.75rem;
+      height: 2.75rem;
+    }
+
+    .tiptap-table-menu-item {
+      min-height: 2.75rem;
+    }
+  }
+
   /* --- Image figure in editor ------------------------------------------- */
 
   .tiptap-image-figure {
@@ -9847,10 +10559,10 @@
   }
 
   .compose-tiptap-body .tiptap .tiptap-footnote-reference {
-    font-size: 0.75em;
+    font-size: var(--type-footnote-ref);
     line-height: 1;
     vertical-align: super;
-    color: var(--site-accent);
+    color: var(--site-footnote-marker);
     white-space: nowrap;
     cursor: pointer;
   }
@@ -9858,6 +10570,7 @@
   .compose-tiptap-body
     .tiptap
     .tiptap-footnote-reference.ProseMirror-selectednode {
+    color: var(--site-accent);
     outline: 1px solid var(--site-accent);
     outline-offset: 2px;
     border-radius: 4px;
@@ -9872,7 +10585,7 @@
   }
 
   .compose-tiptap-body .tiptap .tiptap-footnote-definition::before {
-    content: attr(data-footnote-label);
+    content: "[^" attr(data-footnote-label) "]:";
     grid-column: 1;
     align-self: start;
     color: var(--site-text-secondary);
@@ -10577,12 +11290,16 @@
       var(--site-page-bg) 88%,
       var(--site-elevated-bg) 12%
     );
+  }
 
-    overflow: visible;
+  /* Scoped to the collapsed state. Unscoped it also outranked
+     `.compose-reply-context.expanded` — same specificity, declared later — so
+     fullscreen's "Show more" expanded a box that was still pinned at 140px. */
+  .compose-fullscreen-thread-layout .compose-reply-context:not(.expanded) {
+    max-height: 140px;
   }
 
   .compose-fullscreen-thread-layout .compose-reply-context {
-    max-height: 140px;
     padding: 0.08rem 0 0.08rem;
   }
 
@@ -10596,12 +11313,7 @@
     color: var(--site-text-secondary);
   }
 
-  .compose-fullscreen-thread-layout .compose-thread-dot {
-    margin-top: 0.6rem;
-  }
-
   .compose-fullscreen-editor-row {
-    overflow: visible;
     padding-top: 1.5rem;
   }
 
@@ -10617,10 +11329,9 @@
     gap: 0.7rem;
   }
 
-  .compose-fullscreen-editor-row .compose-thread-dot {
-    margin-top: 0.95rem;
-  }
-
+  /* Stand-in for a hidden title: reads as the field's own placeholder, and
+     clicking it swaps in the real input. Fullscreen has no toolbar to put the
+     `T` toggle on, so this is the way back to a title from here. */
   .compose-fullscreen-title-placeholder {
     display: block;
     width: 100%;
@@ -10852,6 +11563,13 @@
 
   /* --- View toggle -------------------------------------------------------- */
 
+  .archive-toolbar-toggles {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    flex-shrink: 0;
+  }
+
   .archive-view-toggle {
     display: flex;
     align-items: center;
@@ -12157,6 +12875,168 @@
   }
 }
 
+/* ---------------------------------------------------------------------------
+ * Wide public-post footnote rail.
+ *
+ * Kept OUTSIDE @layer components so the runtime layout can override the
+ * unlayered `.prose` list rules. The source HTML remains one natural endnote
+ * list; these selectors only apply after the client has measured a wide detail
+ * or timeline container and confirmed that the rail fits safely.
+ * ------------------------------------------------------------------------- */
+
+:is(
+  [data-post-view] [data-page="post"] [data-post-body].post-detail-body,
+  [data-timeline-item] article[data-post] > [data-post-body].prose
+) {
+  --jant-footnote-rail-enabled: 0;
+}
+
+@media screen {
+  @container post-view (min-width: 56rem) {
+    :is(
+      [data-post-view] [data-page="post"] [data-post-body].post-detail-body,
+      [data-timeline-item] article[data-post] > [data-post-body].prose
+    ) {
+      --jant-footnote-rail-enabled: 1;
+    }
+
+    [data-post-body].prose:is(.footnote-rail-measuring, .footnote-rail-ready) {
+      position: relative;
+    }
+
+    [data-post-body].prose:is(.footnote-rail-measuring, .footnote-rail-ready)
+      > .footnote-endnotes {
+      position: absolute;
+      inset-block-start: 0;
+      inset-inline-start: calc(100% + var(--layout-sidenote-gap));
+      width: var(--layout-sidenote-width);
+      margin: 0;
+      padding: 0;
+      border: 0;
+    }
+
+    [data-post-body].prose:is(.footnote-rail-measuring, .footnote-rail-ready)
+      > .footnote-endnotes
+      > .footnote-list {
+      margin: 0;
+      padding: 0;
+      list-style: none;
+      row-gap: 0.75rem;
+    }
+
+    [data-post-body].prose:is(.footnote-rail-measuring, .footnote-rail-ready)
+      > .footnote-endnotes
+      > .footnote-list
+      > .footnote {
+      display: grid;
+      grid-template-columns: max-content minmax(0, 1fr);
+      column-gap: 1ch;
+      align-items: baseline;
+      min-width: 0;
+      margin: 0;
+      padding: 0;
+      list-style: none;
+    }
+
+    [data-post-body].prose:is(.footnote-rail-measuring, .footnote-rail-ready)
+      > .footnote-endnotes
+      > .footnote-list
+      > .footnote::before {
+      content: var(--footnote-rail-number);
+      grid-column: 1;
+      grid-row: 1;
+      font-size: inherit;
+      line-height: inherit;
+      font-variant-numeric: tabular-nums;
+      color: var(--site-footnote-marker);
+    }
+
+    [data-post-body].prose:is(.footnote-rail-measuring, .footnote-rail-ready)
+      > .footnote-endnotes
+      > .footnote-list
+      > .footnote
+      > * {
+      grid-column: 2;
+      min-width: 0;
+    }
+
+    [data-post-body].prose:is(.footnote-rail-measuring, .footnote-rail-ready)
+      > .footnote-endnotes
+      > .footnote-list
+      > .footnote
+      > :first-child {
+      grid-row: 1;
+    }
+
+    [data-post-body].prose.footnote-rail-measuring > .footnote-endnotes {
+      visibility: hidden;
+    }
+
+    [data-post-body].prose.footnote-rail-measuring
+      > .footnote-endnotes
+      > .footnote-list {
+      display: grid;
+    }
+
+    [data-post-body].prose.footnote-rail-ready
+      > .footnote-endnotes
+      > .footnote-list {
+      position: relative;
+      display: block;
+      block-size: var(--footnote-rail-block-size);
+    }
+
+    [data-post-body].prose.footnote-rail-ready
+      > .footnote-endnotes
+      > .footnote-list
+      > .footnote {
+      position: absolute;
+      inset-block-start: var(--footnote-rail-y);
+      inset-inline: 0;
+      width: 100%;
+    }
+
+    /* The note is already beside its first reference. Keep reciprocal links in
+       the DOM for keyboard and assistive-technology users, revealing them when
+       focus enters rather than adding a persistent arrow to every rail item. */
+    [data-post-body].prose.footnote-rail-ready .footnote-backlinks {
+      position: absolute;
+      width: 1px;
+      height: 1px;
+      padding: 0;
+      margin: -1px;
+      overflow: hidden;
+      clip: rect(0, 0, 0, 0);
+      clip-path: inset(50%);
+      white-space: nowrap;
+      border: 0;
+    }
+
+    [data-post-body].prose.footnote-rail-ready
+      .footnote-backlinks:focus-within {
+      position: static;
+      grid-column: 2;
+      width: auto;
+      height: auto;
+      margin: 0;
+      overflow: visible;
+      clip: auto;
+      clip-path: none;
+      white-space: normal;
+    }
+
+    [data-post-body].prose.footnote-rail-ready .footnote:target {
+      background: transparent;
+    }
+  }
+}
+
+@media print {
+  [data-post-body].prose:is(.footnote-rail-measuring, .footnote-rail-ready) {
+    min-block-size: auto !important;
+  }
+}
+
 /* ---------------------------------------------------------------------------
  * Home description — editorial "lede" paragraph.
  *