fix(pwa): give the dark topnav its own button skin

The .btn skin is built for the light page ground (white fill, ink text).
The topnav rail is #101418, so those buttons landed there as stray
light-mode chips -- and ".bar a{color:var(--rail-text)}" outranks ".btn"
on color (0,1,1 vs 0,1,0), so <a class="btn">Settings</a> painted
rail-text on a white fill: 1.08:1, effectively invisible.

Scope a rail variant to .bar: transparent fill, rail-text label, and a
border at 38% rail-text (3.40:1, clearing the 3:1 non-text minimum --
--rail-line is only 1.4:1 and vanishes). Sign in keeps the green accent,
the focus ring moves green -> mint (3.60:1 -> 9.03:1), and .faint/.dim
in the bar resolve to --rail-dim.

Settings and Sign out go 1.08:1 and light-chip-on-dark to 17.20:1.
Body buttons are untouched -- every rule is .bar-scoped.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

Author: ralyodio

apps/pwa/src/lib/html.mjs

@@ -60,6 +60,18 @@ label.field span{display:block;font-family:var(--mono);font-size:.66rem;letter-s
 .brand .mark{width:26px;height:26px;border-radius:6px;border:1px solid var(--mint);color:var(--mint);display:grid;place-items:center;font-family:var(--mono);font-weight:800;font-size:.8rem;background:transparent}
 .brand .app{font-family:var(--mono);font-weight:600;font-size:.62rem;letter-spacing:.2em;color:var(--faint);text-transform:uppercase;border:1px solid var(--line-2);padding:2px 6px;border-radius:5px}
 .bar .brand .app{color:var(--rail-dim);border-color:var(--rail-line)}
+/* .btn is skinned for the light page ground (white fill, ink text). Dropped in
+   the dark rail it reads as a stray light-mode chip, and worse: ".bar a" above
+   outranks ".btn" on color, so <a class="btn"> ended up rail-text on white --
+   1.05:1, effectively invisible. Give the rail its own button skin. */
+/* 38% is the floor that keeps the button outline at 3:1 against the rail
+   (WCAG non-text contrast); --rail-line is only 1.4:1 and disappears here. */
+.bar .btn{background:transparent;color:var(--rail-text);border-color:color-mix(in srgb,var(--rail-text) 38%,transparent)}
+.bar .btn:hover{background:color-mix(in srgb,var(--rail-text) 12%,transparent);border-color:var(--rail-dim)}
+.bar .btn.acid,.bar .btn.primary{background:var(--green);color:var(--green-ink);border-color:var(--green)}
+.bar .btn.acid:hover,.bar .btn.primary:hover{background:var(--green-2);border-color:var(--green-2)}
+.bar .btn:focus-visible{outline-color:var(--mint)}
+.bar .faint,.bar .dim{color:var(--rail-dim)}
 .bar-right{margin-left:auto;display:flex;align-items:center;gap:12px}
 .grid{display:grid;grid-template-columns:1.55fr .95fr;gap:22px;align-items:start}
 .col{display:flex;flex-direction:column;gap:22px}