/* ════════════════════════════════════════════════════════════════════ Xycora interface standard (see frontend/DESIGN.md) Loaded LAST on every page so the shared components look and move the same everywhere: logo, buttons, fields, dialogs, cards, toasts. Area stylesheets keep their layout; anything they need to vary should use the tokens in variables.css rather than new literals. Mobile first (prompt 034): a rule with no media query is the PHONE rule; larger screens add to it with min-width 600, 900 and 1200 only. ── Phone primitives, shared by every area ────────────────────────── (rules under "Phone primitives" near the end of this file; the helper is scripts/shared/xy-sheet.js, loaded by workspace.html) .xy-sheet A bottom sheet on a phone, a centred card from 600 px. Markup (start it with the hidden attribute): Open: xySheet.open('my-sheet', { opener: btn, onClose: fn }) or a button with data-sheet-open="my-sheet". Close: xySheet.close('my-sheet'), any [data-sheet-close] inside it, Escape, or a swipe down on the head. A "…" menu in one call (built, opened, removed on close): xySheet.menu({ title: 'Matter', opener: btn, items: [ { label: 'Ask Theo', icon: '', onSelect: fn }, { label: 'Delete', danger: true, onSelect: fn } ] }) Modifiers: --full (a dialog: full height on a phone), --wide (a 640 px card from 600 px). Rows inside a sheet: .xy-sheet__list > button.xy-sheet__item (52 px). While one is open, html carries .xy-sheet-lock. Layer: z-index 1300 (system dialogs sit at 1400). .xy-tabs One row of .xy-tab that scrolls sideways on a phone, with a soft fade at the cut edge and the active tab scrolled into view (automatic; after re-rendering a bar you may call xyTabs.refresh(container)). Never wraps. Still from 900 px. .xy-list/.xy-row One tappable row per item, 56 to 72 px: .xy-row__lead (optional icon; add .xy-row--lead), .xy-row__main > .xy-row__title (two lines at most) + .xy-row__meta (one line), .xy-row__status on the right. A