/* ============================================================================ TMA DESIGN SYSTEM — SHELL CHROME Ported from the design prototype's assets/css/components.css (the app bar, identity button, bottom nav + desktop rail, workspace drawer and menu popover blocks) under the §3 fidelity mandate. The app bar is always on, on every surface, and NEVER restyles between areas (DESIGN-SYSTEM §4). That sentence is the reason the host's per-route header overrides come out rather than get layered over: an override that only fires on /app or /admin is, by definition, the bar restyling between areas. SHELL ROOT — the prototype's surface-state classes (rail-desktop, has-rail, has-workdrawer, drawer-open) sit on there, because every prototype screen is a flat document whose bar and nav are body children. On this host the shell has a real root element, and the state is known when that element renders but NOT when does — is written by App.razor, before the layout has resolved who is signed in, and the surface depends on exactly that (the /admin/* namespace holds both the platform console and the operator's own workspace pages, so no path rule can tell them apart). Keying off would therefore mean stamping the class from JS after first paint, and a desktop workbench page would visibly reflow as its 220px rail gutter arrived. So the same correction §7 already applies to the gutter applies here: the rules key off .tma-shell, the shell's own root. Every element they reach — the fixed nav, the drawer, the content column — is inside it, so nothing about the cascade changes; only the ancestor is named honestly. ========================================================================== */ /* ---- app bar (always-on, contextual — never disappears, never restyles) --- */ .tma-appbar { position: sticky; top: 0; z-index: var(--z-appbar); height: var(--appbar-h); display: flex; align-items: center; gap: var(--sp-4); padding-inline: var(--gutter); background: color-mix(in srgb, var(--bg) 86%, transparent); backdrop-filter: blur(14px); border-bottom: 1px solid var(--hairline); } .tma-appbar .brand { display: flex; align-items: center; gap: var(--sp-icon-text); font-weight: 900; letter-spacing: -.01em; color: var(--ink-1); font-size: var(--t-16); text-decoration: none; min-width: 0; /* lets the wordmark be the thing that truncates, not the mark */ } .tma-appbar .brand > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tma-appbar .brand:hover { text-decoration: none; } .tma-appbar .brand .mark { width: 26px; height: 26px; border-radius: 7px; } /* MEASURED at 375px in the running host: the brand mark laid out 22.19x26 and the identity mark 7.52x26 — squashed, not sized. An SVG in a flex row still has flex-shrink: 1, so `width` is a starting size, not a floor. The prototype never shows this because its bar carries no drawer burger, leaving ~40px of slack at 375; this host's bar does. The design's own answer is one line up in its icons section (`.icon { flex: none }`), so the marks take the same treatment. The wordmark is what should give — it truncates; a logo that renders a third of its width is just broken. */ .tma-appbar .mark { flex: none; } .tma-appbar .context { font-size: var(--t-14); color: var(--ink-3); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tma-appbar .spacer { flex: 1; } .tma-appbar .icon-btn { display: grid; place-items: center; width: var(--touch); height: var(--touch); border-radius: var(--radius-sm); color: var(--ink-2); background: none; border: none; } .tma-appbar .icon-btn:hover { background: var(--surface-2); color: var(--ink-1); } /* the Guest / identity button (owner ruling 07-23) */ .tma-appbar .identity-btn { display: inline-flex; align-items: center; gap: var(--sp-icon-text); height: 40px; padding-inline: var(--sp-3) var(--sp-4); border-radius: var(--radius-pill); border: 1px solid var(--hairline-strong); background: var(--surface); color: var(--ink-1); font-weight: 700; font-size: var(--t-14); box-shadow: var(--elev-1); } .tma-appbar .identity-btn .avatar { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-strong); color: var(--accent-on-strong); font-size: var(--t-cap); font-weight: 800; } /* A guest gets the MARK where a signed-in person gets the .avatar (identityContent()), so it takes the avatar's size. NOT in the prototype, and that is the point: measured at 375px on the running prototype, its guest mark lays out at 0×0 — the sheet sizes .appbar .brand .mark but never .identity-btn .mark, so the guest branch emits a mark nothing can see. Porting the CSS verbatim would reproduce an invisible element the design's own code deliberately renders. Reported to the design lane (SHELL.7 §9) rather than silently matched or silently diverged from. */ .tma-appbar .identity-btn .mark { width: 26px; height: 26px; border-radius: 7px; } /* ---- icons — one system: 1.8px-stroke line icons in brand colors ----------- */ /* Ported alongside the chrome because the chrome CANNOT render without it: the blocks below size .icon inside the bottom nav and the drawer title, but the rule that makes an .icon a line icon at all — stroke, no fill — lives in the prototype's icons section. Without it every ported glyph paints as a solid black silhouette. Scoped-descendant rules elsewhere in this file (0,2,0) still out-rank it. */ .icon { width: 20px; height: 20px; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; fill: none; flex: none; } .icon-btn .icon { width: 20px; height: 20px; } /* ---- bottom navigation (mobile) + desktop rail ----------------------------- */ .tma-bottomnav { position: fixed; inset-inline: 0; bottom: 0; z-index: var(--z-bottomnav); height: calc(var(--bottomnav-h) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); display: flex; align-items: stretch; justify-content: space-around; background: color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter: blur(14px); border-top: 1px solid var(--hairline); } .tma-bottomnav a, .tma-bottomnav button { flex: 1; max-width: 120px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: var(--touch); color: var(--ink-3); font-size: var(--t-cap); font-weight: 700; text-decoration: none; background: none; border: none; } .tma-bottomnav a:hover { text-decoration: none; } .tma-bottomnav .icon { width: 22px; height: 22px; } .tma-bottomnav .is-active { color: var(--accent-fg); } .tma-bottomnav .is-active .icon { stroke: var(--accent-fg); } /* desktop: on rail surfaces (.tma-shell.rail-desktop — every patron page per the studio pick, plus business pages) the same destinations become a left rail; the user menu stays bottom-anchored. Business pages layer the workspace DRAWER on top and hide this rail at desktop — see .has-workdrawer below. */ @media (min-width: 1280px) { .tma-shell.rail-desktop .tma-bottomnav { inset: var(--appbar-h) auto 0 0; width: 220px; height: auto; flex-direction: column; justify-content: flex-start; padding: var(--sp-4) var(--sp-2); border-top: none; border-inline-end: 1px solid var(--hairline); gap: var(--sp-nav-item); } .tma-shell.rail-desktop .tma-bottomnav a, .tma-shell.rail-desktop .tma-bottomnav button { flex: none; max-width: none; width: 100%; flex-direction: row; justify-content: flex-start; gap: var(--sp-icon-text); padding-inline: var(--sp-4); min-height: var(--touch); border-radius: var(--radius-sm); font-size: var(--t-14); } .tma-shell.rail-desktop .tma-bottomnav .is-active { background: var(--accent-soft); } .tma-shell.rail-desktop .tma-bottomnav .nav-user { margin-top: auto; } /* The rail's gutter goes on the CONTENT COLUMN, never on the shell root — §7. */ .tma-shell.rail-desktop .tma-shell-main { padding-inline-start: 220px; } } /* ---- the workspace drawer (business surface, studio pick) ------------------ */ .tma-workdrawer { position: fixed; z-index: var(--z-drawer); top: var(--appbar-h); bottom: 0; inset-inline-start: 0; width: min(300px, 86vw); overflow-y: auto; overscroll-behavior: contain; background: var(--surface); /* SHELL.6 — the panel's ink, so anything inside it that is NOT .wd-link markup still reads correctly. On this host the drawer's contents are the platform's own nav map, and the rule that used to colour them carried a FIXED light-theme token onto this theme-aware surface: MEASURED 2.91:1 in dark, below AA, on every link. --ink-2 is the same secondary ink .wd-link already uses, and is defined per theme rather than patched after the fact — 8.92:1 dark, 7.56:1 light. */ color: var(--ink-2); border-inline-end: 1px solid var(--hairline); box-shadow: var(--elev-3); padding: var(--sp-3) var(--sp-3) calc(var(--bottomnav-h) + var(--sp-4)); transform: translateX(calc(-102% * var(--flip))); transition: transform var(--dur) var(--ease); } .tma-shell.drawer-open .tma-workdrawer { transform: none; } .tma-shell.drawer-open .tma-workdrawer-scrim { display: block; } /* F-425 — the drawer's INTERIOR on a route with no circuit. Opening the panel is only half the reach problem. Its groups are MudNavGroup, whose expansion is circuit state, so on a static landing four of the five stay shut and MEASURED 8 of 15 destinations are unreachable with the drawer standing open. Re-implementing MudBlazor's collapse in JS to fix that would fight the framework for a surface that does not want the behaviour in the first place. So on these routes the groups are simply always open, which is not a workaround but the DESIGN: §9.9 records that the prototype's .wd-group IS "a flat titled list, always expanded", and this platform's collapsing groups exist to serve FB-66's per-user expansion memory — a signed-in preference that has no meaning for an anonymous marketing visitor. The chevron goes with it: a control that cannot act should not present itself as one. Scoped to the body marker, so every circuit-backed surface keeps FB-66 untouched. MudBlazor collapses with a GRID, not a height: the container is `display: grid` and animates `grid-template-rows` between 0fr and the measured content height. Overriding `height` alone leaves the row at 0 and the wrapper clipped — it LOOKS like a fix (the container reports auto) while every link inside is still unreachable. MEASURED, which is the only reason this rule is right. */ body[data-drawer-owner="client"] .tma-workdrawer .mud-navgroup-collapse { height: auto !important; grid-template-rows: 1fr !important; visibility: visible !important; } body[data-drawer-owner="client"] .tma-workdrawer .mud-collapse-wrapper { height: auto !important; overflow: visible !important; } body[data-drawer-owner="client"] .tma-workdrawer .mud-nav-link-expand-icon { display: none; } body[data-drawer-owner="client"] .tma-workdrawer .mud-nav-group > .mud-nav-link { cursor: default; } .tma-workdrawer-scrim { position: fixed; inset: 0; z-index: calc(var(--z-drawer) - 1); display: none; /* visible only while the drawer is open (R50) */ background: var(--scrim); } .tma-workdrawer .wd-link { display: flex; align-items: center; gap: var(--sp-2); min-height: 40px; padding: 4px var(--sp-3); border-radius: var(--radius-sm); color: var(--ink-2); font-size: var(--t-14); font-weight: 600; text-decoration: none; } .tma-workdrawer a.wd-link:hover { background: var(--surface-2); color: var(--ink-1); text-decoration: none; } .tma-workdrawer .wd-link.is-here { background: var(--accent-soft); color: var(--accent-fg); } .tma-workdrawer .wd-link.is-soon { color: var(--ink-3); cursor: default; } /* A4 counts ride the desk that answers them, pinned to the trailing edge */ .tma-workdrawer .wd-link .badge-count { margin-inline-start: auto; } .tma-workdrawer .wd-dash { font-weight: 700; margin-bottom: var(--sp-2); } .tma-workdrawer .wd-group { margin-top: var(--sp-3); padding-top: var(--sp-2); border-top: 1px solid var(--hairline); } .tma-workdrawer .wd-title { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-1) var(--sp-3); color: var(--ink-1); font-size: var(--t-cap); font-weight: 800; letter-spacing: .05em; text-transform: uppercase; } .tma-workdrawer .wd-title .icon { width: 16px; height: 16px; } @media (min-width: 1280px) { /* the drawer IS the desktop navigation on business pages: sticky open, collapsible, no scrim — and the thin 4-slot rail stands down for it */ .tma-shell.has-workdrawer .tma-bottomnav { display: none; } .tma-shell.has-workdrawer .tma-workdrawer { box-shadow: none; z-index: var(--z-rail); } .tma-shell.has-workdrawer .tma-workdrawer-scrim { display: none; } /* SHELL.6 — THE DESKTOP-OPEN DEFAULT, and the reason it lives here rather than in C#. The prototype opens the drawer at mount with `setOpen(desktop() && pref !== "closed")`, because a browser knows its own viewport. The server does not, and both ways of telling it are worse than not needing it: asking JS before first paint costs a visible reflow at 1280 (the drawer paints closed, then snaps open), and remembering the answer costs a write on a load path that runs TWICE under Blazor prerendering (F-386). So the media query IS the default, and the class carries only the EXPLICIT override — the same tri-state the prototype stores in DB.pref("workdrawer"): absent / open / closed. Gated with :not() rather than written as an unconditional `transform: none` plus a later override, so an explicit close wins by not matching this rule at all — there is no specificity race to lose, and no state in which both rules claim the drawer. ShellDrawerState.IsOpen is the C# statement of exactly this rule, and ShellChromeCssTests holds the two together. */ .tma-shell.has-workdrawer:not(.drawer-closed) .tma-workdrawer { transform: none; } /* §7, the app-bar full-bleed rule — implemented as the rule STATES it rather than as the prototype had to implement it. The prototype reserves the drawer's gutter on the document body and then negates it back off the bar, because there every page is a flat document and the bar is a body child. The brief's own wording is the correction: "The drawer's reserved gutter belongs on the content column, never on the shell root — putting it on the root indents the bar and leaves a blank corner in both drawer states." This host renders the bar and the content as siblings inside the shell, so the gutter can go straight onto the content column and the bar spans the viewport with nothing to negate. Same result, one rule instead of two, and the failure mode the note warns about cannot occur. Inline-direction properties throughout, so it mirrors correctly under RTL. R45 — note the selector carries no open/closed state: the gutter is RESERVED either way, so toggling the drawer never shifts the page left and right, and .area-wrap (margin auto) keeps centering inside what is left. It must also out-rank the rail rule above, which sets 220px on the same element at the same specificity — source order is doing that work, so this block stays BELOW the rail block. */ .tma-shell.has-workdrawer .tma-shell-main { padding-inline-start: min(300px, 86vw); } } /* ---- user menu / generic menu popover -------------------------------------- */ .tma-menu-pop { position: absolute; z-index: var(--z-popover); min-width: 240px; background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius); box-shadow: var(--elev-3); padding: var(--sp-2); } .tma-menu-pop .menu-item { display: flex; align-items: center; gap: var(--sp-icon-text); width: 100%; min-height: var(--touch); padding-inline: var(--sp-3); border-radius: var(--radius-sm); color: var(--ink-1); font-size: var(--t-14); font-weight: 600; text-decoration: none; } .tma-menu-pop .menu-item:hover { background: var(--surface-2); text-decoration: none; } .tma-menu-pop .menu-sep { border-top: 1px solid var(--hairline); margin: var(--sp-2) 0; } .tma-menu-pop .menu-head { padding: var(--sp-2) var(--sp-3); font-size: var(--t-cap); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); } /* ---- the shell's own content column ---------------------------------------- */ /* The bar is sticky and in normal flow, so it occupies its own height and the content needs no offset for it — the MudMainContent appbar padding that used to supply that offset is now double-counting and comes off. */ .tma-shell-main { padding-top: 0; } .tma-shell-main > .tma-shell-canvas { padding-bottom: var(--bottomnav-h); } @media (min-width: 1280px) { .tma-shell.has-workdrawer .tma-shell-main > .tma-shell-canvas { padding-bottom: 0; } }