/* * Light-DOM layout only — never re-implements M3E's own component * chrome (color/shape/motion come from the `` wrap in * index.html/start.html + each component's shadow styles). This file * exists because M3E's shadow styles set sensible per-component * defaults that say nothing about how OUR specific composition of those * components should lay out relative to each other or respond to * viewport width — that's this stylesheet's job. */ /* `#ec-room-access` is a real `m3e-toolbar` (not a hand-rolled div): its shadow DOM already provides the correct `toolbar` role AND real keyboard navigation (arrow/Home/End via `RovingTabIndexManager`) — a plain div with `role="toolbar"` would claim that contract without delivering it. `variant="standard" elevated shape="rounded"` gives it the surface background, elevation shadow, and pill radius itself, so this rule is positioning + sizing only — never hand-roll chrome the component already owns. `:host { display: inline-block }` is the component's own default, so as a `position: fixed` element it already shrink-wraps to content; only `--m3e-toolbar-size` (default 4rem — far taller than this compact pill wants) and spacing/padding need overriding. */ #ec-room-access { position: fixed; top: 14px; right: 18px; z-index: 20; --m3e-toolbar-size: 2.5rem; --m3e-toolbar-spacing: 6px; --m3e-toolbar-rounded-padding: 4px 10px; } /* At or below 920px, `position: fixed` in the viewport's top-right corner is no longer safe (see `mountRoomAccessCluster()`'s doc comment in ui.ts for the measured collision threshold against SocialCalc's own non-reflowing menu bar) — fall back to a normal in-flow block instead, which `mountRoomAccessCluster()` places immediately before `#tableeditor` for exactly this case. `width: fit-content` + `margin-left: auto` keeps the pill itself shrink-wrapped and right-aligned rather than stretching the whole row full-width. Keep the host `relative`, not `static`: M3E's shadow state layer is `position: absolute; inset: 0`, so it needs the toolbar as its containing block instead of expanding against the initial containing block. Resetting `top`/`right` preserves the in-flow placement that `static` previously provided. SocialCalc re-measures `#tableeditor`'s new `offsetTop` on its own (see ui.ts) - the grid simply starts lower, the same trade-off the pre-redesign toolbar always made, just no longer paid on desktop where there was room to avoid it entirely. The expanded menu ends around x=769 at a 921px viewport; the widest ~126px cluster begins around x=777 there, leaving a measured 8px gap. */ @media (max-width: 920px) { #ec-room-access { position: relative; top: auto; right: auto; display: block; width: fit-content; max-width: calc(100% - 24px); margin: 8px 12px 8px auto; } } /* `position: relative` needed for the same reason as `.ec-floatnav__link` below — see that rule's comment: a plain, non-custom-element leaf (this badge ``) slotted directly into `m3e-toolbar` needs the explicit opt-in to paint above the toolbar's own `` hover overlay. Every OTHER child here is a real `m3e-button`/ `m3e-icon-button`, which - like every M3E component - already sets `:host { position: relative }` on itself, so none of them need this repeated. */ .ec-room-access__badge { position: relative; font-size: 0.75rem; font-weight: 600; color: var(--md-sys-color-error, #ba1a1a); padding: 0 6px 0 2px; white-space: nowrap; } #ec-private-gate { display: grid; min-height: 60vh; place-items: center; padding: 24px 16px; } m3e-card { width: min(440px, 100%); } #ec-landing-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; } /* ---- Floating project-links pill (landing page only) ------------------- * start.html's plain `