/* ---- Left nav drawer + hamburger (T2) -------------------------------- Its own sheet, loaded by BOTH designer.html and admin.html. These rules used to sit inline in designer.html, kept out of styles.css because that sheet is shared with admin.html and only the designer had a drawer. That reason is gone -- both pages now render the same drawer -- so they live here rather than being duplicated inline twice. styles.css stays as it is. The header is z-index 1100, so the scrim sits above it and the drawer above the scrim. */ .nav-menu-btn{display:inline-flex;flex-direction:column;justify-content:center;gap:4px;width:40px;height:40px;padding:0 9px;background:#fff;border:1.5px solid var(--wine);border-radius:8px;cursor:pointer} .nav-menu-btn span{display:block;height:2px;background:var(--wine);border-radius:2px} /* ---- The app header's title ------------------------------------------ Here, not in products.css, because this is EVERY page's header title now. products.html ships its own .fxh-title and products.js rewrites it per screen; designer.html and admin.html ship no title at all, so nav.js creates one -- and nav.css is the only one of these sheets all three pages load. In products.css the rule would style one page and silently fail on the other two. The title takes every spare pixel, so the header lays out identically whether or not a gear is present -- no gear does not mean a stretched or re-centred title. 🔴 THE SELECTOR IS TWO CLASSES ON PURPOSE. DO NOT "SIMPLIFY" IT TO .fxh-title. The parent changed -- this

is in .admin-header now, not in a
-- but the reason did not: styles.css's `.card h2` at (0,1,1) still exists and specificity is compared BEFORE source order, so a bare `.fxh-title` at (0,1,0) loses even though nav.css loads later. The declarations below would be silently discarded and the title would render as 13px uppercase wine with a 2px underline. .admin-header qualifies it to (0,2,0), which wins -- same trick, new parent. And because `.card h2` sets EIGHT properties, all eight are overridden here explicitly -- an unnamed one is not harmless, it just inherits the wrong value from a rule written for a card heading rather than a flex header. */ .admin-header .fxh-title{ flex:1 1 auto; min-width:0; /* the eight from .card h2 */ /* One declaration instead of an 18px rule plus a 16px mobile override: a second rule would have to repeat the two-class selector to keep beating `.card h2`, and a repeated workaround is the one that gets simplified away. */ font-size:clamp(16px, 4vw, 18px); /* On the maroon header, not a white bar: --ink is near-black on dark wine. */ color:#fff; font-weight:700; letter-spacing:normal; text-transform:none; margin:0; padding-bottom:0; border-bottom:0; /* A long style name must not wrap to a second line and change the header's height — 68px is a number three other rules derive from. It truncates. */ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .nav-scrim{position:fixed;inset:0;z-index:1150;background:rgba(0,0,0,.45);border:0} .nav-drawer{position:fixed;top:0;left:0;z-index:1200;display:flex;flex-direction:column;width:260px;max-width:80vw;height:100%;background:var(--panel);border-right:1px solid var(--line);box-shadow:2px 0 14px rgba(0,0,0,.18);transform:translateX(-100%);transition:transform .22s ease} .nav-drawer.is-open{transform:translateX(0)} .nav-drawer[hidden]{display:none} /* 🔴 3K-8e-2f: while the drawer is open the page behind it does not scroll (nav.js puts .nav-locked on ), and a scrollbar that took room is replaced by padding of the same width, so nothing shifts sideways. */ html.nav-locked{overflow:hidden} html.nav-locked-gutter{padding-right:var(--nav-gutter)} .nav-drawer-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:16px 18px;background:linear-gradient(180deg,var(--wine-dark),var(--wine))} /* The title used to be the 4-character word "Menu". It now holds a DB-supplied company name of unknown length inside a 260px drawer, so it truncates rather than growing the flex row and pushing the close button off the edge. */ .nav-drawer-title{color:#fff;font-size:15px;font-weight:800;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .nav-drawer-close{background:transparent;border:0;color:#fff;font-size:26px;line-height:1;cursor:pointer;padding:0 4px} .nav-drawer-body{flex:1;overflow-y:auto;padding:12px} .nav-drawer-foot{padding:14px 18px;border-top:1px solid var(--line)} /* ---- Drawer contents ------------------------------------------------- Everything below is rendered by nav.js, so these class names are that file's contract: change one and change the other. */ /* Body items. Rendered as or