diff --git a/ZB.MOM.WW.Theme/src/ZB.MOM.WW.Theme/wwwroot/css/layout.css b/ZB.MOM.WW.Theme/src/ZB.MOM.WW.Theme/wwwroot/css/layout.css
index dd30161..5283b09 100644
--- a/ZB.MOM.WW.Theme/src/ZB.MOM.WW.Theme/wwwroot/css/layout.css
+++ b/ZB.MOM.WW.Theme/src/ZB.MOM.WW.Theme/wwwroot/css/layout.css
@@ -209,8 +209,12 @@
     color: var(--ink-faint);
 }
 .rail-btn {
+    /* Side inset, declared once. The full-width modifier below subtracts it from
+       100%, so the two MUST agree; keeping it in a custom property means the rail
+       inset can be changed here alone. */
+    --rail-btn-inset: 0.6rem;
     display: inline-block;
-    margin: 0 0.6rem;
+    margin: 0 var(--rail-btn-inset);
     padding: 0.3rem 0.7rem;
     font-size: 0.78rem;
     font-weight: 600;
@@ -228,9 +232,10 @@
 /* Full-width modifier for a rail-foot action (sign in / sign out), composed as
    class="rail-btn rail-btn-block".
 
-   The width is explicit — calc(100% - 1.2rem) — and NOT one of the two obvious
-   shorthands, because a rail foot typically holds BOTH element types: Sign In
-   is an <a>, Sign Out is a form-submit <button>. Each shorthand breaks one:
+   The width is explicit — 100% minus twice .rail-btn's side inset — and NOT one
+   of the two obvious shorthands, because a rail foot typically holds BOTH element
+   types: Sign In is an <a>, Sign Out is a form-submit <button>. Each shorthand
+   breaks one:
 
      width: 100%   overflows. It resolves against the containing block and then
                    .rail-btn's 0 0.6rem side margins are ADDED on top, pushing
@@ -244,11 +249,20 @@
                    operators see.
 
    calc() gets both right (measured 0px short for <a> and <button> alike). The
-   1.2rem must stay in step with .rail-btn's side margins above. */
+   inset is read from .rail-btn's own --rail-btn-inset rather than restated here,
+   so the two rules cannot drift apart if the rail inset ever changes.
+
+   The 0.6rem fallback is NOT decoration. --rail-btn-inset is declared on
+   .rail-btn, so it only resolves for the documented `rail-btn rail-btn-block`
+   composition; on `rail-btn-block` alone the var() would be undefined, which
+   makes the WHOLE width declaration invalid at computed-value time and silently
+   drops it back to width:auto — i.e. it would resurrect the exact shrink-wrap
+   bug this rule exists to fix, and only on <button>. The fallback degrades to
+   the correct literal instead. */
 .rail-btn-block {
     display: block;
     box-sizing: border-box;
-    width: calc(100% - 1.2rem);
+    width: calc(100% - 2 * var(--rail-btn-inset, 0.6rem));
     text-align: center;
 }