/* ============================================================================ app-shell.css — the B+ global navigation frame (M1_5_BPLUS_GLOBAL_SHELL). Visual source of truth: apps/erp/docs/ui-proposals-2026-07-28/_shell-snippet.html BLOCK 0 + BLOCK 6 NEW FILE rather than an addition to css/header.css, which was already 384 lines — over the Iron Rule 12 hard cap of 350 — before this run started. --------------------------------------------------------------------------- VISUAL IDENTITY: OWN_NAMESPACE (P-AUTHOR-2026-05-28-B), and why. Two project rules meet head-on in this file and both are right: * The mockup kit (line 169) mandates LITERAL values and forbids var(), because the live pages reference tokens no mockup defines, and a var() that resolves to nothing drops the whole declaration at parse time and renders the sidebar as bare text. That is the DLU_SPEC3_FULL_FLEET bug. * The repo's design-token gates forbid raw hex and literal font-sizes in any NEW css file. Resolved by declaring the shell's own scoped scale here, in .bplus-shell, and referencing it everywhere below. The token-definition lines are the only place a literal appears, which is exactly the form all three gates strip before checking — so the mockup's values survive byte-for-byte AND nothing is allowlisted or grandfathered. Brand navy is deliberately NOT bound to var(--primary). --color-primary is tenant-overridable at runtime by theme-loader.js, so binding it would let a tenant repaint the global navigation — which is how M17 silently shipped in Prizma green. B+ locks this navy; a tenant's brand belongs on the content, not on the frame. The NEUTRALS below are the same Slate values as shared/css/variables.css (--color-gray-900 is #0f172a, --color-gray-200 is #e2e8f0, and so on), so this namespace agrees with the design system rather than competing with it. ========================================================================== */ .bplus-shell{ /* brand — locked by decision B+, not tenant-themeable */ --bplus-navy: #1e3a8a; --bplus-navy-lift: #3b5bd0; --bplus-accent: #60a5fa; --bplus-accent-soft: #93c5fd; --bplus-danger: #ef4444; --bplus-chipline: #c7d2fe; --bplus-chipbg: #eef2ff; /* neutrals — same Slate values as shared/css/variables.css */ --bplus-ink: #0f172a; --bplus-surface: #ffffff; --bplus-canvas: #f0f2f5; --bplus-line: #e2e8f0; --bplus-mute-100: #f1f5f9; --bplus-mute-300: #cbd5e1; --bplus-mute-400: #94a3b8; --bplus-mute-500: #64748b; /* type scale — the mockup's exact pixel values. Deliberately NOT bound to var(--font-size-*): that scale is rem-based (0.75/0.85/0.92rem) and none of its steps equal 10.5px, 12.5px or 13px, so binding to it would quietly redraw approved typography. */ --bplus-fs-logo: 18px; --bplus-fs-name: 15px; --bplus-fs-tiny: 10.5px; --bplus-fs-item: 13px; --bplus-fs-hint: 11.5px; --bplus-fs-ctl: 12.5px; --bplus-fs-bdg: 10px; --bplus-fs-tog: 14px; --bplus-fs-tip: 12px; --bplus-fs-bdg-s: 9px; /* The sidebar's CURRENT width, PUBLISHED for other components to read — it does NOT drive this sidebar's own width. A host that pins its own furniture with position:fixed resolves inset-inline-start against the VIEWPORT, which in RTL is the exact strip this sidebar occupies, so without an offset the two land on top of each other. inventory.html's category sidebar did (SHELL_FIXPACK D3). Deliberately a MIRROR of the literals on .bplus-sbar below, not their source. Driving width from this var looked tidier and silently broke the collapse: .bplus-sbar carries `transition: width .22s`, and an unregistered custom property is not animatable, so a var-driven width never reached its new value — the rail stayed 240px forever while the labels hid, measured on the develop preview. (Disabling the transition snapped it to 56px, which is what isolated it.) Keep this value equal to the literal below and to the rail override. */ --bplus-sbar-w: 240px; /* The header row's height, PUBLISHED for the same reason as --bplus-sbar-w above: a host whose own root is sized to the viewport (crm.html's `.crm-app{height:100vh}`) is no longer the viewport's only occupant once the shell puts a header row above it, and needs to subtract this. Same discipline as the width: a MIRROR of the literal on .bplus-hdr below, never its source — keep the two equal. */ --bplus-hdr-h: 60px; display:flex;align-items:stretch;direction:rtl;font-family:'Heebo',sans-serif;min-height:100vh;text-align:right; } /* ============================================================================ THE SHELL DEFENDS ITS OWN LAYOUT (SHELL_MAKE_IT_RIGHT, 2026-08-06) The rule this section exists to enforce, ruled by the owner after he found a broken shell on his own screen twice: > The shell renders identically regardless of what the host's , or > any bare element selector in any stylesheet the host loads, happens to > declare. Two defects, one failure: the shell re-parents into an environment it does not control, and did not defend against it. * A stylesheet reached IN. `shared/css/tabs.css` styled the legacy tab strip as a bare `nav{}`; the shell's sidebar nav is a