diff --git a/web/css/03-settings.css b/web/css/03-settings.css
index 837b3db..d62bb2b 100644
--- a/web/css/03-settings.css
+++ b/web/css/03-settings.css
@@ -35,12 +35,14 @@
   font-size: 18px;
   line-height: 1;
 }
-/* The theme segment is flex-shrunk to fit the row, leaving a sliver of the
-   row's own right padding between the segment's border and the row's
-   border. With the segment's own right border and shadow still drawn there,
-   that sliver reads as a clipped fourth segment; drop both so the segment's
-   fill runs straight into the row's border instead. */
+/* The segment closes the row's right edge rather than floating 14px inside it,
+   so the row's own border is the active option's ink edge; its right border
+   there would double the row's, and its shadow would fall outside the row. */
+.settings-row:has(> .segment) {
+  padding-right: 0;
+}
 .settings-row .segment {
+  align-self: stretch;
   border-right: none;
   box-shadow: none;
 }
diff --git a/web/css/04-controls.css b/web/css/04-controls.css
index bc41c58..987972f 100644
--- a/web/css/04-controls.css
+++ b/web/css/04-controls.css
@@ -118,11 +118,8 @@
 .btn--block {
   width: 100%;
 }
-/* A smaller footprint for buttons sitting inline in chrome rows (e.g. the
-   public-crate hero bar) rather than a form/card's own action row. Still a
-   real 44px box, not a halo: `.btn` shows up in rows an author can pack
-   tightly, so its tap target is never allowed to depend on empty neighbour
-   space. 12px font + 14px×2 padding + 2px×2 border = 44px. */
+/* Inline in chrome rows rather than a form's action row, and still a real 44px
+   box with no halo: 12px font + 14px×2 padding + 2px×2 border. */
 .btn--compact {
   padding: 14px 14px;
   font-size: 12px;
diff --git a/web/css/06-crate.css b/web/css/06-crate.css
index 276abf3..a273a35 100644
--- a/web/css/06-crate.css
+++ b/web/css/06-crate.css
@@ -5,7 +5,12 @@
 .hero {
   position: relative;
   flex-shrink: 0;
-  height: 132px;
+  display: flex;
+  flex-direction: column;
+  /* min- rather than a fixed height so the public variant's in-flow bar can
+     grow the band when a long handle wraps; the crate variant's children are
+     all absolute, so it stays exactly 132px. */
+  min-height: 132px;
   border-bottom: 3px solid var(--ink);
   overflow: hidden;
   /* Greenhouse art; the gradient beneath paints while (or if) the photo never loads. */
@@ -39,17 +44,23 @@
   letter-spacing: 1.5px;
   padding: 2px 0;
 }
-/* Public crate: back button and handle cluster left instead of space-between. */
+/* Public crate: back button and handle cluster left instead of space-between.
+   In flow, unlike the base bar, so a wrapped handle grows the hero instead of
+   printing over the overlap panel and count below it. */
 .hero__bar--public {
+  position: static;
   justify-content: flex-start;
 }
-/* The handle is the identity, not decoration: it wraps instead of ellipsing.
-   overflow-wrap covers the no-spaces case (a handle breaks only at its own
-   dots by nature, which isn't always enough room). */
+/* The handle is the identity, not decoration: it wraps instead of ellipsing,
+   anywhere rather than at its own dots, which are too sparse to rely on. The
+   22px display face is sized for the 5-letter wordmark and wraps a median
+   handle to two lines, so this takes the same mono as .settings-account__handle. */
 .hero__brand--handle {
   text-transform: uppercase;
   min-width: 0;
   overflow-wrap: anywhere;
+  font: 700 16px/1.2 var(--mono);
+  letter-spacing: 0.3px;
 }
 /* Pushed to the row's far end regardless of how little space the handle needs. */
 .hero__follow {
@@ -81,7 +92,7 @@
 /* Bottom-aligned flow stack, so an optional taste-overlap panel can grow it without hand-tuned absolute offsets. */
 .hero__content {
   position: relative;
-  height: 100%;
+  flex: 1;
   display: flex;
   flex-direction: column;
   align-items: flex-start;
@@ -139,9 +150,11 @@
   justify-content: space-between;
   margin-bottom: 14px;
 }
+/* 10px so the filter chips' 5px halos meet without overlapping, which would
+   hand the shared strip to whichever chip paints last. */
 .tags {
   display: flex;
-  gap: 8px;
+  gap: 10px;
   flex-wrap: wrap;
 }
 
diff --git a/web/css/07-browse.css b/web/css/07-browse.css
index 5147835..a8661c6 100644
--- a/web/css/07-browse.css
+++ b/web/css/07-browse.css
@@ -88,10 +88,8 @@
   display: flex;
   gap: 6px;
 }
-/* Carries `.btn`, so it opts out of the shared halo (90-interaction.css);
-   the two actions sit only 6px apart, too tight to trust a halo not to
-   bleed onto the neighbour. 11px font + 15px×2 padding + 2px×2 border =
-   45px, earned for real. */
+/* 45px in the box itself (11px font + 15px×2 padding + 2px×2 border); the two
+   actions sit 6px apart, too tight for a halo to grow into. */
 .browse-card__actions .btn {
   flex: 1;
   padding: 15px 8px;
diff --git a/web/css/10-edit-inbox.css b/web/css/10-edit-inbox.css
index 225101f..d1290f2 100644
--- a/web/css/10-edit-inbox.css
+++ b/web/css/10-edit-inbox.css
@@ -77,10 +77,8 @@
   display: flex;
   gap: 12px;
 }
-/* Vertical padding is redundant now that the `.btn` base already reaches
-   47px on its own; only the extra horizontal room and the heavier
-   border/shadow (approve/reject deserve more visual weight) are this
-   row's own. */
+/* Approve and reject carry more consequence than a normal action, so they get
+   more visual weight: a heavier border, a deeper shadow, wider flanks. */
 .actions .btn {
   border-width: 2.5px;
   box-shadow: var(--shadow-md);
diff --git a/web/css/13-scan.css b/web/css/13-scan.css
index a63b82f..294fcaf 100644
--- a/web/css/13-scan.css
+++ b/web/css/13-scan.css
@@ -56,8 +56,7 @@
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-/* Carries `.btn`, so it opts out of the shared halo (90-interaction.css)
-   and earns 44px for real: 13px font + 14px×2 padding + 2px×2 border. */
+/* 45px in the box itself, no halo: 13px font + 14px×2 padding + 2px×2 border. */
 .scan-row__dismiss {
   padding: 14px 12px;
 }
diff --git a/web/css/14-windowing.css b/web/css/14-windowing.css
index 296bdd8..f618051 100644
--- a/web/css/14-windowing.css
+++ b/web/css/14-windowing.css
@@ -1,6 +1,7 @@
 /* --- crate windowing (LOAD MORE) --------------------------------------- */
+/* 1px, because .load-more-count's own 15px of top padding carries the rest. */
 .load-more-block {
-  margin-top: 16px;
+  margin-top: 1px;
 }
 .load-more-count {
   display: block;
@@ -12,8 +13,10 @@
   font: 700 11px/1.3 var(--mono);
   letter-spacing: 0.5px;
   color: var(--ink-muted);
-  margin: 0 0 10px;
-  padding: 0;
+  margin: 0;
+  /* 14px text + 15px×2 = 44px in the box itself: a full-width block inside an
+     overflow:auto list would turn a halo into real horizontal scroll. */
+  padding: 15px 0;
   font-variant-numeric: tabular-nums;
 }
 .load-more-count:disabled {
diff --git a/web/css/15-misc.css b/web/css/15-misc.css
index 6824773..a223ba9 100644
--- a/web/css/15-misc.css
+++ b/web/css/15-misc.css
@@ -49,8 +49,8 @@
   flex: 1;
   min-width: 0;
 }
-/* 34px visual (14px font + 10px×2 padding) clears the shared halo's +5px
-   sides (90-interaction.css) up to the 44px floor. */
+/* 34px tall and wide once the glyph's ~8px is padded out, which the halo in
+   90-interaction.css then takes to 44px on both axes. */
 .notice__dismiss {
   flex-shrink: 0;
   width: auto;
@@ -59,7 +59,7 @@
   color: inherit;
   cursor: pointer;
   font: 700 14px/1 var(--mono);
-  padding: 10px 12px;
+  padding: 10px 13px;
 }
 .notice--success {
   background: var(--owned);
diff --git a/web/css/19-edit-proposal.css b/web/css/19-edit-proposal.css
index 33b593c..a3d3663 100644
--- a/web/css/19-edit-proposal.css
+++ b/web/css/19-edit-proposal.css
@@ -67,9 +67,7 @@
   gap: 12px;
   margin-bottom: 8px;
 }
-/* Vertical padding is redundant now that the `.btn` base already reaches
-   47px on its own; only the extra horizontal room and the heavier
-   border/shadow are this row's own. */
+/* The one consequential action on the page: heavier border, deeper shadow. */
 .proposal-detail-actions .btn--primary {
   border-width: 2.5px;
   box-shadow: var(--shadow-md);
diff --git a/web/css/90-interaction.css b/web/css/90-interaction.css
index 70bb283..3da9cc2 100644
--- a/web/css/90-interaction.css
+++ b/web/css/90-interaction.css
@@ -24,50 +24,42 @@ textarea:focus-visible {
   outline-offset: 2px;
 }
 
-/* Tap-target floor (44px), structural rather than a maintained list: a
-   plain `<button>` or `[role="button"]` is, in this codebase, always a
-   small icon/dismiss/filter-style control sized to its content well under
-   the floor, so it defaults to an invisible halo that grows the hit area
-   without growing the visual. A new one is covered without anyone
-   remembering to add it here.
-   `.btn`-family controls (button or anchor) opt out on purpose: they turn
-   up in rows with author-controlled gaps (6-12px in this codebase) too
-   tight to trust a shared halo not to bleed onto a neighbour, so they earn
-   their 44px+ the honest way, in their own padding (see 04-controls.css
-   and its per-case overrides).
-   `.icon-btn` opts back in explicitly because it's also rendered as an
-   `<a>` (the back button), which `button:not(.btn)` can't reach. */
-button:not(.btn),
-[role="button"]:not(.btn),
-input[type="submit"],
-input[type="button"],
-input[type="reset"],
-.icon-btn {
+/* Tap-target floor (44px) via an invisible halo, opted into by name: an
+   absent halo only leaves a control small, an unwanted one steals taps from
+   whatever the control stacks against. Everything else earns 44px in padding. */
+.icon-btn,
+button.chip,
+.display-toggle__btn,
+.notice__dismiss {
   position: relative;
 }
-button:not(.btn)::before,
-[role="button"]:not(.btn)::before,
-input[type="submit"]::before,
-input[type="button"]::before,
-input[type="reset"]::before,
-.icon-btn::before {
+.display-toggle__btn::before,
+.notice__dismiss::before {
   content: "";
   position: absolute;
   inset: -5px;
 }
-/* Already >=44px on its own box (.segment button's min-height) and packed
-   edge-to-edge with a sibling behind a 2px divider: a halo here would
-   steal taps across that divider instead of growing into empty space. */
-.segment button::before {
-  content: none;
+/* 7px, not 5px: an absolute ::before is inset from the padding box, so a 2px
+   border eats 2px of any halo drawn over it. */
+.icon-btn::before,
+button.chip::before {
+  content: "";
+  position: absolute;
+  inset: -7px;
+}
+/* Two halves of one control behind a shared 2px divider: grow outward only,
+   or each half's halo lands on the other. */
+.display-toggle__btn:first-child::before {
+  inset: -5px 0 -5px -5px;
+}
+.display-toggle__btn:last-child::before {
+  inset: -5px -5px -5px 0;
 }
 
-/* 34px visual (11px font + 9.5px×2 padding + 2px×2 border), +5px halo on
-   all sides on the interactive `button.chip` variant = the spec's 44px hit
-   area. Applies to `.chip` broadly (not just `button.chip`) so a static
-   badge chip matches the visual size of a clickable one. */
+/* 35px visual (11px font + 10px×2 padding + 2px×2 border), 45px with the halo.
+   Applies to `.chip` broadly so a static badge chip matches a clickable one. */
 .chip {
-  padding: 9.5px 11px;
+  padding: 10px 11px;
 }
 
 /* Press feedback for the button-like controls .btn doesn't already cover