/* Presentation for the UI shell (chrome) — the accent icon rail, the module-owned secondary panel, the * persistent top bar, content frame and footer. The rail + secondary are FIXED (non-scrolling) at every * width, pinned below the top bar (M-075): a single top-bar toggle drives one nav model, expressed as two * flags on and read per breakpoint. Below 48rem they slide in as one off-canvas drawer over a * scrim (data-nav-open); from 48rem up they are on-screen by default and the content column is offset by * their width, collapsing off-screen — with the content reclaiming the width — when data-nav-collapsed is * set (persisted). The secondary panel is only present when the active module contributes one; when * absent, content clears the rail alone. Embedded mode renders no chrome at all, so the rail/secondary/ * top-bar rules simply have nothing to style there. Every value comes from the design tokens (tokens.css) * so the shell is themeable without touching markup (coding-standards §4, §12). */ .platform-shell { margin: 0; min-height: 100vh; font-family: var(--platform-font-body); font-size: var(--platform-font-size-md); letter-spacing: var(--platform-letter-spacing, normal); color: var(--platform-color-text); background: var(--platform-color-page-bg, #f2f2f6); } /* Keyboard skip link — visually hidden until focused. */ .platform-shell__skip-link { position: absolute; left: var(--platform-space-sm); top: -3rem; z-index: 60; padding: var(--platform-space-xs) var(--platform-space-sm); background: var(--platform-color-surface); color: var(--platform-color-accent); border-radius: var(--platform-radius-sm); transition: top 0.15s ease; } .platform-shell__skip-link:focus { top: var(--platform-space-sm); } /* Brand lockup — shared markup, context-coloured (see rail/top-bar overrides below). */ .platform-shell__brand { display: inline-flex; align-items: center; gap: var(--platform-space-sm); color: inherit; text-decoration: none; } .platform-shell__brand-mark { display: inline-flex; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem; border-radius: var(--platform-radius-sm); background: var(--platform-color-accent); color: var(--platform-color-on-accent); font-weight: 700; } /* ── Persistent top bar (all widths, M-075) ─────────────────────────────────────────────────── * Holds the brand + the single nav toggle. Sticky at the top and ABOVE the mobile scrim so the toggle * stays clickable to dismiss the drawer. The fixed rail/subnav start just below it (top: topbar-height). */ .platform-shell__topbar { position: sticky; top: 0; z-index: 55; display: flex; align-items: center; gap: var(--platform-space-sm); height: var(--platform-topbar-height); padding: 0 var(--platform-space-md); background: var(--platform-color-surface); border-bottom: 1px solid var(--platform-color-border); } .platform-shell__nav-toggle { display: inline-flex; align-items: center; justify-content: center; padding: var(--platform-space-xs); color: var(--platform-color-text); background: none; border: 1px solid var(--platform-color-border); border-radius: var(--platform-radius-sm); cursor: pointer; } .platform-shell__nav-toggle:hover { background: var(--platform-color-surface-muted); } .platform-shell__nav-icon { width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; } /* ── Layout: rail + secondary + content column ────────────────────────────────────────────── */ .platform-shell__layout { display: flex; align-items: stretch; } .platform-shell__content-col { display: flex; flex: 1; min-width: 0; flex-direction: column; /* The persistent top bar (all widths) sits above the layout, so fill the rest of the viewport. */ min-height: calc(100vh - var(--platform-topbar-height)); } /* ── Primary icon rail ────────────────────────────────────────────────────────────────────── */ /* Fixed at EVERY width, pinned below the top bar and full-height to the viewport bottom. It slides in * as an off-canvas drawer on mobile and collapses off-screen on desktop — the same transform, driven by * the nav flags on in the media-scoped rules further down. Hidden (off-screen) by default here. */ .platform-rail { position: fixed; top: var(--platform-topbar-height); bottom: 0; left: 0; z-index: 50; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; gap: var(--platform-space-md); width: var(--platform-rail-width); padding: var(--platform-space-md) 0; /* `visible` (not `auto`) so the instant hover/focus label chips can escape the narrow rail to the * right. The rail holds a handful of icons, so it never needs to scroll at this scale. */ overflow: visible; color: var(--platform-color-sidebar-text); background: linear-gradient(180deg, var(--platform-color-sidebar), var(--platform-color-sidebar-strong)); transform: translateX(-100%); transition: transform 0.2s ease; } .platform-rail__items { display: flex; flex-direction: column; align-items: center; gap: var(--platform-space-xs); width: 100%; } /* The icon-only entry: a square tap target. The label is the accessible name (title/aria-label). */ .platform-rail__item { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; color: var(--platform-color-sidebar-text-muted); background: none; border: 0; border-radius: var(--platform-radius-md); cursor: pointer; text-decoration: none; } .platform-rail__item:hover { color: var(--platform-color-sidebar-text); background: var(--platform-color-sidebar-hover); } .platform-rail__item[aria-current="page"] { color: var(--platform-color-sidebar-text); background: var(--platform-color-sidebar-active); } .platform-rail__icon { width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; } /* A count/status chip floating on the upper-right of an icon: the static `badgeKey` chip and the M-123 live per-user numeric badge (e.g. the open-todo count) share this appearance, token-driven throughout. */ .platform-rail__badge { position: absolute; top: 0.125rem; right: 0.125rem; min-width: 1rem; padding: 0 0.25rem; font-size: var(--platform-font-size-xs); line-height: 1rem; text-align: center; color: var(--platform-color-on-accent); background: var(--platform-color-error); border-radius: 1rem; } /* User initial + sign-out pinned to the foot of the rail. */ .platform-rail__foot { margin-top: auto; display: flex; flex-direction: column; align-items: center; gap: var(--platform-space-xs); } /* User menu (M-096): the rail-foot avatar is now a MENU trigger. The wrapper anchors the flyout popover * (shared appearance in `.platform-popover`) and the DevTools-gated dev modal; the avatar circle is the * `.platform-rail__avatar` trigger button inside it. */ .platform-rail__user { position: relative; display: inline-flex; } .platform-rail__avatar { width: 2rem; height: 2rem; border-radius: 50%; background: var(--platform-color-sidebar-text); color: var(--platform-color-accent); font-size: var(--platform-font-size-sm); font-weight: 700; } /* The avatar keeps its accent-on-light circle on hover (not the rail's square hover fill), so it still * reads as the user chip while remaining a button. */ .platform-rail__avatar:hover { background: var(--platform-color-sidebar-text); color: var(--platform-color-accent); } /* Persistent "developer slow-network simulation is on" marker (M-097): a small warning dot on the avatar so a * developer never forgets a self-imposed delay is slowing their session. Only rendered for a developer with * the simulator active; theme-token coloured so it re-skins. */ .platform-rail__dev-flag { position: absolute; top: -0.15rem; right: -0.15rem; width: 0.65rem; height: 0.65rem; background: var(--platform-color-error); border: 2px solid var(--platform-color-sidebar); border-radius: 50%; } /* Anchor the user menu to the right of the avatar, its foot aligned to the trigger (like the language and * theme popovers). */ .platform-user-menu { left: calc(100% + var(--platform-space-sm)); bottom: 0; } /* Theme sun/moon cycle button (M-094) — a rail button that flips the active theme between the user's two * starred favourites (A↔B). Its glyph depicts the TARGET favourite's Bootstrap base: a SUN when a tap * switches TO a light-base theme, a MOON when it switches TO a dark-base one, so it reads correctly * whatever the two favourites are. Both glyphs are in the markup; the controller keeps `data-target-base` * pointed at the target's base and CSS reveals the matching one (no JS touches markup, §4). */ .platform-theme-toggle__icon { display: none; } .platform-theme-toggle[data-target-base="light"] .platform-theme-toggle__icon--sun, .platform-theme-toggle[data-target-base="dark"] .platform-theme-toggle__icon--moon { display: block; } /* Language switcher (M-083) — a rail flag button that opens a small locale menu to its right. The * trigger reuses the rail's icon-button box; the flag sits centered inside it. */ .platform-lang { position: relative; display: inline-flex; } .platform-lang__flag { display: block; width: auto; height: 1rem; border-radius: 2px; box-shadow: inset 0 0 0 1px var(--platform-color-border); } /* Anchor the language menu to the right of its trigger. The shared popover appearance is in * `.platform-popover` below; only the anchoring is switcher-specific. */ .platform-lang .platform-popover { left: calc(100% + var(--platform-space-sm)); bottom: 0; } /* ── Rail popover (M-083 language switcher + M-086 style picker) ────────────────────────────────── * The shared flyout menu appearance behind both rail popovers (the JS twin is popover_controller.js): * a dropdown on the app surface (not the dark rail), positioned absolutely by each host's own rule * above, and hidden via the `hidden` attribute until its controller opens it. The rail is * `overflow: visible`, so the menu escapes the narrow column. */ .platform-popover { position: absolute; z-index: 60; min-width: 9rem; margin: 0; padding: var(--platform-space-xs); list-style: none; background: var(--platform-color-surface); border: 1px solid var(--platform-color-border); border-radius: var(--platform-radius-md); box-shadow: var(--platform-shadow-md); } .platform-popover[hidden] { display: none; } .platform-popover form { margin: 0; } .platform-popover__option { display: flex; align-items: center; gap: var(--platform-space-sm); width: 100%; padding: var(--platform-space-xs) var(--platform-space-sm); color: var(--platform-color-text); font-size: var(--platform-font-size-sm); text-align: left; text-decoration: none; background: none; border: 0; border-radius: var(--platform-radius-sm); cursor: pointer; } /* The small glyphs on user-menu rows (M-096) sit inline with the label; they inherit the option's colour * via currentColor so they re-skin with the theme. */ .platform-user-menu .platform-rail__icon { flex-shrink: 0; width: 1.1rem; height: 1.1rem; } .platform-popover__option:hover, .platform-popover__option:focus-visible { background: var(--platform-color-surface-muted); } /* The active option reads as selected: accent-tinted, its label emphasized. */ .platform-popover__option[aria-checked="true"] { color: var(--platform-color-accent); background: var(--platform-color-accent-surface); font-weight: 600; } .platform-popover__label { white-space: nowrap; } /* ── Style picker (M-086 + M-089 + M-094) — the theme control wrapper: the sun/moon cycle button with a * PALETTE selector button stacked beneath it that opens the shared popover listing every configured * theme. The two buttons stack vertically so the rail column stays icon-narrow (M-094 replaced M-089's * floating "+"). */ .platform-style { position: relative; display: flex; flex-direction: column; align-items: center; gap: var(--platform-space-xs); } /* The palette selector reads as active while its menu is open (M-094), matching the rail's active-item * treatment so the open state is obvious. */ .platform-theme-styles[aria-expanded="true"] { color: var(--platform-color-sidebar-text); background: var(--platform-color-sidebar-active); } /* Anchor the theme menu to the right of the button stack (like the language switcher), with its foot * aligned to the selector button that opens it. */ .platform-style .platform-popover { left: calc(100% + var(--platform-space-sm)); bottom: 0; } /* The colour chip previewing each theme; its per-theme `background` is set by the nonce'd