From f313c5e62e3d91df9e47a513d5b1cfef8cf33edc Mon Sep 17 00:00:00 2001
From: Joseph Doherty <dohejw01@gmail.com>
Date: Tue, 11 Aug 2026 03:20:37 -0400
Subject: [PATCH] refactor(theme): rail-btn inset as --rail-btn-inset so
 .rail-btn and .rail-btn-block cannot drift
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Unreleased — behaviourally identical to the published 0.4.1 (browser-verified:
composed <a> and <button> both fill the rail foot exactly, 0.00px short). The
var() carries a 0.6rem fallback because --rail-btn-inset is declared on .rail-btn,
so rail-btn-block used alone would otherwise have an undefined var, invalidating
the whole width declaration at computed-value time and silently reverting to
width:auto — the exact <button> shrink-wrap bug 0.4.1 fixed.
---
 .../ZB.MOM.WW.Theme/wwwroot/css/layout.css    | 26 ++++++++++++++-----
 1 file changed, 20 insertions(+), 6 deletions(-)

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;
 }