/* ─────────────────────────────────────────────────────────────────────────────
Solvix platform rail — the ONE sidebar spec, shared by all three apps.
Delivery Solution (Matrix) is a single 39k-line index.html we do not edit, so
its rail is injected at runtime by nav.js and styled here. UAT and Governance
render their own markup but follow the same numbers, so the three read as one
product:
rail 232px · bg #fff · border-right 1px #e2e8f0
group label 10px / 600 / .14em / uppercase / #64748b
item 28px tall · 13.5px / 500 · radius 8px · pitch 30px
icon 14px / stroke 1.6 / opacity .9
hover #f1f5f9 on #0f172a
active #e6f4f2 on #0f766e / 600
footer 44px, pinned, avatar + name/email + sign out
THOSE NUMBERS ARE A SUMMARY, NOT THE SOURCE. Every one of them is a token in
tokens.css and every rule below reads the token. They were literals here
until the rail-fit work, which is the drift tokens.css exists to prevent --
and is why "make the icons smaller" was a four-file change in four idioms.
THIS FILE IS THE REFERENCE RAIL. The other three are matched to it, not the
other way round, because it is the only one whose every number is already a
token and the only one with no framework idiom in the way. When P2's
styles.css, P3's Sidebar.tsx or the shell's inline block disagrees with a
rule below, the rule below is right. So the standing obligation on this file
is stricter than on those: NO SHARED NUMBER MAY BE A LITERAL HERE. A literal
in a reference is a number three other files will copy and then outlive.
"Shared" is the line, and it is drawn deliberately rather than as an excuse.
A number is shared -- and must be a token -- if it appears in the fit
arithmetic, or if any other rail states it too. Everything in the item,
group, header and footer rules is one or both, and all of it now reads a
token. What stays a literal is single-implementation ornament that exists in
this file ALONE: .solvix-launcher and .solvix-launcher-bars, since no other
rail has a launcher -- it is the <900px control Matrix needs because it has
no chrome of its own -- plus sub-pixel nudges with no twin anywhere, a 2px
hit-area padding, a 1px optical margin, border-radius:50% on a disc.
Tokenising those would add variables with one consumer each, which is the
other way to make a shared file unreadable.
The rail is sized to fit a 1366x768 laptop with all three groups expanded,
the Administration row present and the footer visible. The arithmetic lives
beside the geometry tokens in tokens.css; do not change --sx-item-h,
--sx-head-h, --sx-foot-h, the group margins or the Administration margins
without redoing it. It is currently 597px against a MEASURED 633px of usable
height, which is ~40px less than the estimate the previous pass used -- the
reporter's screenshots are at 1.5x DPR and the 232px rail measures 348 image
px, so the whole image divides by 1.5 and the budget was simply wrong. That
40px is why the footer was half off the bottom of the screen.
Every selector stays namespaced `solvix-` so it cannot collide with the host
page. On wide screens the rail is permanent; under 900px it collapses back to
the launcher + overlay, which is what small screens actually want.
How Matrix's content is inset, and why it is a margin:
A transform on also works — it makes body the containing block for its
position:fixed descendants, so all 27 move with it — but that is exactly the
problem. Measured on the running page: with a transform, `bottom`-anchored
fixed elements resolve against body's box instead of the viewport, so the
Co-Pilot launcher and the feedback button drift mid-page on short pages and
scroll away entirely on long ones. That is a functional regression, not a
cosmetic one.
A plain margin keeps position:fixed genuinely viewport-fixed. It leaves
left-anchored fixed elements sitting over the rail, but measured on the
running page there is exactly one: #copilotLauncher (and #copilotPanel when
opened), handled by name below. Full-viewport overlays (inset:0 modals) are
deliberately left covering the rail, which is what a modal should do.
The rail is mounted on rather than so it is never affected by
whatever the host page does to body.
───────────────────────────────────────────────────────────────────────────── */
:root{
/* DERIVED, not restated. This was a second literal 232px sitting beside
tokens.css's --sx-rail-w, which is the drift tokens.css exists to prevent
and which made the rail impossible to collapse from one place: two
variables held the same number and only one of them moved.
The fallback keeps this stylesheet standalone-correct. tokens.css is
injected ahead of nav.css everywhere (inject-config.js for Matrix,
order in the shell), but if it ever failed to load the rail should still be
232px wide rather than 0. */
--solvix-rail-w: var(--sx-rail-w, 232px);
}
/* The rail owns its own box model instead of inheriting the host page's.
PRE-EXISTING BUG, surfaced by the collapse work rather than caused by it:
.solvix-panel declares width:var(--solvix-rail-w) and padding:0 10px plus a
1px border, so under content-box it renders 253px while the body margin that
clears it is exactly var(--solvix-rail-w) = 232px. 21px of rail over the
page. Collapsed it is proportionally worse -- 81px of panel against a 64px
inset -- which is how it got noticed.
nav.css's own header states the spec as "rail 232px", so 253 was never the
intention; the rail just happened to look right on hosts that set
box-sizing:border-box globally, and depended on them for its geometry.
Measured on a bare host page: 253px expanded, 81px collapsed.
Namespaced to .solvix-panel and its descendants, so it cannot reach a single
element of the host page. */
.solvix-panel, .solvix-panel *{ box-sizing:border-box; }
.solvix-launcher{
position:fixed; top:10px; left:10px; z-index:2147483000;
display:flex; align-items:center; gap:7px;
height:32px; padding:0 11px 0 9px;
background:var(--sx-accent,#0F766E); color:var(--sx-accent-fg,#fff); border:0;
border-radius:var(--sx-mark-radius,7px);
font-family:var(--sx-font-sans,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif);
font-size:12px; font-weight:600; line-height:1;
letter-spacing:.01em; cursor:pointer;
/* Was this shadow spelled out by hand; it is byte-identical to --sx-shadow-pop. */
box-shadow:var(--sx-shadow-pop, 0 1px 2px rgba(15,23,42,.18), 0 6px 18px -8px rgba(15,23,42,.4));
transition:opacity var(--sx-t-slow,.18s) ease, transform var(--sx-t-slow,.18s) ease,
background var(--sx-t-fast,.12s) ease;
}
.solvix-launcher:hover{ background:var(--sx-accent-hover,#115E56); }
.solvix-launcher.solvix-tucked{ opacity:0; pointer-events:none; transform:translateX(-6px); }
.solvix-launcher:focus-visible{ outline:var(--sx-focus-width,2px) solid var(--sx-focus-ring,#0F766E); outline-offset:2px; }
.solvix-launcher-bars{ display:flex; flex-direction:column; gap:2.5px; }
.solvix-launcher-bars i{ display:block; width:12px; height:1.8px; background:var(--sx-accent-fg,#fff); border-radius:1px; }
.solvix-scrim{
position:fixed; inset:0; z-index:2147482998;
background:var(--sx-scrim-bg,rgba(15,23,42,.34)); opacity:0; pointer-events:none;
transition:opacity var(--sx-t-slow,.18s) ease;
}
.solvix-scrim.solvix-open{ opacity:1; pointer-events:auto; }
/* THREE ROWS, NOT ONE SCROLLING BOX. The panel used to be `overflow-y:auto`
with everything inside it, which is exactly what scrolled once the rail grew
a footer: the sign-out control would have been the last thing in the scroll
flow, i.e. the first thing off-screen for the one person who has the most
rows -- a platform administrator on a 768px laptop.
So the panel is a flex column that does NOT scroll, and the middle row does.
nav.js must emit the three rows in this order:
.solvix-panel-head fixed height, --sx-head-h
.solvix-scroll flex:1, the ONLY scrolling element; holds
.solvix-admin and every .solvix-group
.solvix-foot fixed height, --sx-foot-h, pinned
`min-height:0` on the scroller is load-bearing and not defensive noise: a
flex item's default `min-height:auto` refuses to shrink below its content,
so without it the item list grows the column past the panel and overflows
under the footer instead of scrolling inside it. */
.solvix-panel{
position:fixed; top:0; left:0; bottom:0; z-index:2147482999;
width:var(--solvix-rail-w); max-width:86vw;
display:flex; flex-direction:column; overflow:hidden;
background:var(--sx-rail-bg,#fff); border-right:1px solid var(--sx-rail-border,#E2E8F0);
box-shadow:var(--sx-rail-shadow, 0 0 40px -12px rgba(15,23,42,.45));
transform:translateX(-100%); transition:transform var(--sx-t-slow,.18s) ease;
/* Split out of the `font:` shorthand. The shorthand RESETS every font
property it does not name -- font-weight and font-style among them -- so
it cannot be expressed in tokens without also silently restating those. */
font-family:var(--sx-font-sans,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif);
font-size:var(--sx-item-font-size,13.5px); line-height:1.5;
color:var(--sx-item-idle-fg,#475569); padding:0;
-webkit-font-smoothing:antialiased;
}
.solvix-panel.solvix-open{ transform:translateX(0); }
/* The horizontal padding that used to live on .solvix-panel now lives on the
three rows, because a padded flex column would pad the footer's top rule in
from the rail edges and it has to span them.
The bottom padding is a term in the fit arithmetic, so it is a token
(--sx-scroll-pad-b) rather than the literal 8px it was. */
.solvix-scroll{
flex:1 1 auto; min-height:0; overflow-y:auto; overflow-x:hidden;
padding:0 var(--sx-scroll-pad-x,10px) var(--sx-scroll-pad-b,6px);
}
.solvix-panel-head{
flex:0 0 auto;
display:flex; align-items:center; gap:var(--sx-head-gap,10px);
height:var(--sx-head-h,44px); padding:0 var(--sx-item-pad-x,12px);
margin:0 0 var(--sx-head-mb,4px);
border-bottom:1px solid var(--sx-rail-border,#E2E8F0);
}
/* The brand is the route back to the platform home. Before this, nothing in
any of the three apps linked to "/" — once you were inside an app the only
way out was the browser's back button. */
.solvix-home{
display:flex; align-items:center; gap:var(--sx-head-gap,10px);
flex:1; min-width:0; text-decoration:none; color:inherit;
border-radius:var(--sx-item-radius,8px); padding:2px;
}
.solvix-home:hover .solvix-title b{ color:var(--sx-accent,#0F766E); }
.solvix-home:focus-visible{ outline:var(--sx-focus-width,2px) solid var(--sx-focus-ring,#0F766E); outline-offset:1px; }
.solvix-mark{
width:var(--sx-mark-size,28px); height:var(--sx-mark-size,28px);
flex:0 0 var(--sx-mark-size,28px); border-radius:var(--sx-mark-radius,7px);
background:var(--sx-mark-bg,#0F766E); color:var(--sx-mark-fg,#fff); display:grid; place-items:center;
font-weight:700; font-size:var(--sx-mark-font-size,10.5px); letter-spacing:.02em;
}
.solvix-title{ flex:1; min-width:0; }
.solvix-title b{ display:block; font-size:var(--sx-wordmark-size,13.5px); font-weight:600; color:var(--sx-wordmark-fg,#0F172A); letter-spacing:-.01em; line-height:1.2; }
/* `> span`, not ` span`: this styles the DELIVERY PLATFORM subtitle, a direct
child, and as a descendant selector it also caught the spans inside the
wordmark in the above -- stacking SOL / i / x vertically at 9px. */
.solvix-title > span{
display:block; font-size:var(--sx-subtitle-size,9px);
letter-spacing:var(--sx-subtitle-tracking,.18em); text-transform:uppercase;
color:var(--sx-subtitle-fg,#64748B); font-weight:500; margin-top:1px;
}
.solvix-close{
background:none; border:0; color:var(--sx-muted,#64748B); font-size:20px; line-height:1;
cursor:pointer; padding:2px 6px; border-radius:var(--sx-ctl-radius,6px);
}
.solvix-close:hover{ color:var(--sx-item-hover-fg,#0F172A); background:var(--sx-item-hover-bg,#F1F5F9); }
/* Collapse toggle. Mirrors the shell landing page's button exactly — same 64px
target, same tmc.rail key, same chevron flip — so the control behaves the
same wherever you meet it.
Hidden by default and shown only at >=900px, where the rail is PERMANENT.
Below that the rail is already a drawer and .solvix-close is the right
control; the two swap and are never both on screen. Collapsing a drawer to
64px of icons over the content it overlays would be a worse drawer. */
.solvix-collapse{
display:none; background:none; border:0; cursor:pointer;
color:var(--sx-muted,#64748B); padding:4px; border-radius:var(--sx-ctl-radius,6px); line-height:0;
transition:background var(--sx-t-fast,.12s) ease, color var(--sx-t-fast,.12s) ease;
}
.solvix-collapse:hover{ color:var(--sx-item-hover-fg,#0F172A); background:var(--sx-item-hover-bg,#F1F5F9); }
.solvix-collapse:focus-visible{ outline:var(--sx-focus-width,2px) solid var(--sx-focus-ring,#0F766E); outline-offset:1px; }
/* --sx-ctl-icon-size, NOT --sx-icon-size. This is header chrome, not a row
glyph: the rows shrank to buy vertical budget and this control sits in a
fixed-height header where shrinking it buys nothing and costs a target. */
.solvix-collapse svg{
width:var(--sx-ctl-icon-size,15px); height:var(--sx-ctl-icon-size,15px);
display:block; transition:transform var(--sx-t-slow,.18s) ease;
}
html.sx-rail-collapsed .solvix-collapse svg{ transform:scaleX(-1); }
@media (prefers-reduced-motion:reduce){ .solvix-collapse svg{ transition:none; } }
/* `display:flow-root` rather than a bare block, and the group no longer
carries a margin of its own.
Both changes exist to make this rail's spacing resolve to the SAME number as
P2's and P3's. The old pair -- `.solvix-group + .solvix-group{margin-top:14px}`
plus `margin:14px 0 6px` on the label -- collapsed to one 14px gap here,
because .solvix-panel was a block and the label's top margin escaped its
parent, and added up to 28px in the two flex columns, where margins do not
collapse. Two rails, one stylesheet's worth of intent, two different gaps.
Now --sx-group-mt on the LABEL is the only separation anywhere, and
flow-root keeps it (and the last item's 2px bottom margin) inside the group
box, so the block panel and the flex columns measure identically. */
.solvix-group{ padding:0; display:flow-root; }
.solvix-group-label{
font-size:var(--sx-group-font-size,10px); letter-spacing:var(--sx-group-tracking,.14em);
line-height:var(--sx-group-line-h,13px); text-transform:uppercase;
color:var(--sx-group-fg,#64748B); font-weight:var(--sx-group-font-weight,600);
padding:0 var(--sx-item-pad-x,12px);
margin:var(--sx-group-mt,10px) 0 var(--sx-group-mb,3px);
}
/* This selector was DEAD until the .solvix-scroll wrapper went in: the first