/* ============================================================================ APP.CSS — layer order + the app's own design tokens. This file is the ROOT of the app's stylesheet system. It is always loaded first (src/ui/styles.ts), and it does exactly two things: 1. declares the cascade-layer order for every app stylesheet, once; 2. defines the app-level tokens that base.css does not own. ── The layer contract ──────────────────────────────────────────────────── base.css declares its own layers first: @layer tokens, reset, elements, context, components, utilities; ...so everything we declare below sits AFTER them and therefore outranks them, whatever the selectors weigh. Inside our own stack the rule is the same and it is now structural rather than a convention: a later layer beats an earlier one REGARDLESS OF SPECIFICITY. `.side-nav li a` (0,1,2) in app.components can no longer outrank `.adm-link` (0,1,0) in app.console — that class of bug (AGENTS.md §14.5) is gone by construction, not by care. app.tokens this file app.components components.css shared widgets app.layouts layouts.css page skeletons app.modules modules.css feature screens app.branch branch.css the branch workspace (bzw-) app.console super-admin.css the review console (adm-) app.overrides overrides.css conditional only: @media/@supports/print Two consequences worth knowing: - NOTHING in public/styles/ may be unlayered. An unlayered rule beats every layer above and silently re-creates the specificity war this stack removes. scripts/check-css.mjs fails the run if it finds one. - !important inverts the layer order (app.overrides!important loses to app.components!important). So !important is not an escape hatch here; move the rule to a later layer instead. ==========================================================================*/ @layer app.tokens, app.components, app.layouts, app.modules, app.branch, app.console, app.overrides; @layer app.tokens { :root { --gold-50: #fffbf0; --gold-100: #fdf2d2; --gold-200: #f6e2a6; --gold-300: #eccb6c; --gold-400: #d8a92c; --gold-500: #c1941b; --gold-550: #b3850f; --gold-600: #96700c; --gold-700: #6f5207; --gold-800: #4a3604; --gold-950: #2d210c; --i-eye: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237e736e' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 12S6 5.5 12 5.5 21.5 12 21.5 12 18 18.5 12 18.5 2.5 12 2.5 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E"); --i-eye-off: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237e736e' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.6 6a9.6 9.6 0 0 1 1.4-.1c6 0 9.5 6.1 9.5 6.1a17 17 0 0 1-2.8 3.4M6.3 7.8A16.7 16.7 0 0 0 2.5 12S6 18.1 12 18.1a9.3 9.3 0 0 0 3.5-.7'/%3E%3Cpath d='M9.9 9.9a3 3 0 0 0 4.2 4.2M3 3l18 18'/%3E%3C/svg%3E"); --icon-cards: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='8' height='16' rx='2'/%3E%3Crect x='13' y='4' width='8' height='16' rx='2'/%3E%3C/svg%3E"); --icon-settings: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M19.4 15a1.6 1.6 0 0 0 .3 1.8l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.6 1.6 0 0 0-1.8-.3 1.6 1.6 0 0 0-1 1.5v.2a2 2 0 1 1-4 0v-.1a1.6 1.6 0 0 0-1-1.5 1.6 1.6 0 0 0-1.8.3l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1a1.6 1.6 0 0 0 .3-1.8 1.6 1.6 0 0 0-1.5-1H2a2 2 0 1 1 0-4h.1a1.6 1.6 0 0 0 1.5-1 1.6 1.6 0 0 0-.3-1.8l-.1-.1a2 2 0 1 1 2.8-2.8l.1.1a1.6 1.6 0 0 0 1.8.3H9a1.6 1.6 0 0 0 1-1.5V2a2 2 0 1 1 4 0v.1a1.6 1.6 0 0 0 1 1.5 1.6 1.6 0 0 0 1.8-.3l.1-.1a2 2 0 1 1 2.8 2.8l-.1.1a1.6 1.6 0 0 0-.3 1.8V9a1.6 1.6 0 0 0 1.5 1h.2a2 2 0 1 1 0 4h-.1a1.6 1.6 0 0 0-1.5 1z'/%3E%3C/svg%3E"); --icon-signout: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4'/%3E%3Cpath d='M16 17l5-5-5-5M21 12H9'/%3E%3C/svg%3E"); --icon-signin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4'/%3E%3Cpath d='M10 17l5-5-5-5M15 12H3'/%3E%3C/svg%3E"); --icon-user: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21a8 8 0 0 1 16 0'/%3E%3C/svg%3E"); --icon-company: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 21h18M5 21V7l7-4 7 4v14'/%3E%3Cpath d='M9 21v-5h6v5M9 10h.01M15 10h.01M9 13h.01M15 13h.01'/%3E%3C/svg%3E"); --icon-place: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10l2-6h14l2 6M3 10h18M4.5 10v10h15V10M9.5 20v-5h5v5'/%3E%3C/svg%3E"); --icon-verified: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.8'/%3E%3Cpath d='m8.1 12.4 2.6 2.6 5.3-5.6'/%3E%3C/svg%3E"); --icon-unverified: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.8'/%3E%3Cpath d='M12 7.4v5.6'/%3E%3Cpath d='M12 16.5h.01'/%3E%3C/svg%3E"); --icon-wait: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.8'/%3E%3Cpath d='M12 7.2V12l3.4 2.1'/%3E%3C/svg%3E"); --icon-dashboard: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='9' rx='1.5'/%3E%3Crect x='14' y='3' width='7' height='5' rx='1.5'/%3E%3Crect x='14' y='12' width='7' height='9' rx='1.5'/%3E%3Crect x='3' y='16' width='7' height='5' rx='1.5'/%3E%3C/svg%3E"); --icon-history: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 12a8.5 8.5 0 1 0 2.5-6L3.5 8.5'/%3E%3Cpath d='M3.5 3.5v5h5'/%3E%3Cpath d='M12 7.5V12l3 2'/%3E%3C/svg%3E"); --icon-mail: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='5' width='19' height='14' rx='2.5'/%3E%3Cpath d='m3 7 9 6 9-6'/%3E%3C/svg%3E"); --icon-side-collapse: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='2.5'/%3E%3Cpath d='M9.5 4v16'/%3E%3Cpath d='m17 9.8-2.4 2.2 2.4 2.2'/%3E%3C/svg%3E"); --icon-side-expand: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='2.5'/%3E%3Cpath d='M9.5 4v16'/%3E%3Cpath d='m14.4 9.8 2.4 2.2-2.4 2.2'/%3E%3C/svg%3E"); --icon-menu: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round'%3E%3Cpath d='M4 7h16M4 12h16M4 17h16'/%3E%3C/svg%3E"); --icon-download: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M7 10l5 5 5-5M12 15V3'/%3E%3C/svg%3E"); --icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9.5 6 6 6-6'/%3E%3C/svg%3E"); --icon-trash: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h16M10 11v6M14 11v6'/%3E%3Cpath d='M6 7l1 13a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2l1-13M9 7V4h6v3'/%3E%3C/svg%3E"); --icon-devices: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='14' height='10' rx='2'/%3E%3Cpath d='M5 18h8'/%3E%3Crect x='17' y='9' width='5' height='11' rx='1.5'/%3E%3C/svg%3E"); --icon-edit: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.12 2.12 0 0 1 3 3L7 19l-4 1 1-4z'/%3E%3C/svg%3E"); --icon-fact-role: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='7' width='18' height='13' rx='2.5'/%3E%3Cpath d='M9 7V5.5A1.5 1.5 0 0 1 10.5 4h3A1.5 1.5 0 0 1 15 5.5V7'/%3E%3Cpath d='M3 12.5h18'/%3E%3C/svg%3E"); --icon-fact-nationality: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18'/%3E%3Cpath d='M12 3c2.7 2.6 4.1 5.6 4.1 9s-1.4 6.4-4.1 9c-2.7-2.6-4.1-5.6-4.1-9S9.3 5.6 12 3z'/%3E%3C/svg%3E"); --icon-fact-education: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4 2.5 8.5 12 13l9.5-4.5z'/%3E%3Cpath d='M6.5 10.7V16c0 1.6 2.5 2.9 5.5 2.9s5.5-1.3 5.5-2.9v-5.3'/%3E%3Cpath d='M21.5 8.5v5.5'/%3E%3C/svg%3E"); --icon-fact-address: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21.5s7-6.4 7-11.4a7 7 0 1 0-14 0c0 5 7 11.4 7 11.4z'/%3E%3Ccircle cx='12' cy='10' r='2.7'/%3E%3C/svg%3E"); --icon-fact-region: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 4.5 3 7v12.5l6-2.5 6 2.5 6-2.5V4.5l-6 2.5z'/%3E%3Cpath d='M9 4.5v12.5M15 7v12.5'/%3E%3C/svg%3E"); --icon-fact-cr: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H7.5A2.5 2.5 0 0 0 5 5.5v13A2.5 2.5 0 0 0 7.5 21h9a2.5 2.5 0 0 0 2.5-2.5V8z'/%3E%3Cpath d='M14 3v5h5'/%3E%3Cpath d='M9 13.5h6M9 17h4'/%3E%3C/svg%3E"); --icon-fact-area: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9.5v-5a.5.5 0 0 1 .5-.5h5'/%3E%3Cpath d='M14.5 4h5a.5.5 0 0 1 .5.5v5'/%3E%3Cpath d='M20 14.5v5a.5.5 0 0 1-.5.5h-5'/%3E%3Cpath d='M9.5 20h-5a.5.5 0 0 1-.5-.5v-5'/%3E%3C/svg%3E"); --icon-fact-phone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 3.5h3l1.4 3.6-2 1.3a12 12 0 0 0 5.2 5.2l1.3-2 3.6 1.4v3a2 2 0 0 1-2.2 2A16.8 16.8 0 0 1 5 5.7 2 2 0 0 1 7 3.5z'/%3E%3C/svg%3E"); --icon-fact-name: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='5' width='19' height='14' rx='2.5'/%3E%3Ccircle cx='8.5' cy='10.5' r='2'/%3E%3Cpath d='M5.5 16c.6-1.6 1.7-2.4 3-2.4s2.4.8 3 2.4'/%3E%3Cpath d='M14.5 9.5h4M14.5 13h4'/%3E%3C/svg%3E"); --icon-fact-gender: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='12' r='5.5'/%3E%3Ccircle cx='15' cy='12' r='5.5'/%3E%3C/svg%3E"); --icon-fact-birthday: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12h15v7A1.5 1.5 0 0 1 18 20.5H6a1.5 1.5 0 0 1-1.5-1.5z'/%3E%3Cpath d='M4.5 15.5c1.2 1.1 2.3 1.1 3.5 0s2.3-1.1 3.5 0 2.3 1.1 3.5 0 2.3-1.1 3.5 0'/%3E%3Cpath d='M8 12V9.5M12 12V9M16 12V9.5'/%3E%3Cpath d='M12 6.5v.01M8 7v.01M16 7v.01'/%3E%3C/svg%3E"); --icon-fact-interests: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20.5s-7.6-4.7-9.3-9.1A5.3 5.3 0 0 1 12 6.8a5.3 5.3 0 0 1 9.3 4.6c-1.7 4.4-9.3 9.1-9.3 9.1z'/%3E%3C/svg%3E"); --icon-fact-about: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6h16M4 10h12M4 14h16M4 18h8'/%3E%3C/svg%3E"); --icon-fact-email: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5.5' width='18' height='13' rx='2'/%3E%3Cpath d='m4.5 7.5 7.5 5.5 7.5-5.5'/%3E%3C/svg%3E"); --icon-fact-calendar: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5' width='17' height='15.5' rx='2'/%3E%3Cpath d='M3.5 9.5h17M8 3v4M16 3v4'/%3E%3C/svg%3E"); --icon-fact-clock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M12 7.5V12l3 2'/%3E%3C/svg%3E"); --icon-fact-sessions: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='4.5' width='14' height='10' rx='1.5'/%3E%3Cpath d='M7 18.5h5M9.5 14.5v4'/%3E%3Crect x='17.5' y='9.5' width='4' height='9' rx='1.2'/%3E%3C/svg%3E"); --icon-fact-tag: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 11V4.5a1 1 0 0 1 1-1H11l9.3 9.3a1.4 1.4 0 0 1 0 2l-5.5 5.5a1.4 1.4 0 0 1-2 0z'/%3E%3Ccircle cx='8' cy='8' r='1.4'/%3E%3C/svg%3E"); --icon-fact-language: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4.5h16a1 1 0 0 1 1 1V15a1 1 0 0 1-1 1h-9.5L6 19.5V16H4a1 1 0 0 1-1-1V5.5a1 1 0 0 1 1-1z'/%3E%3Cpath d='M7.5 10.25h.01M11.5 10.25h.01M15.5 10.25h.01'/%3E%3C/svg%3E"); --icon-fact-legal: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4.5V19M8.5 19h7M5 7.5h14'/%3E%3Cpath d='m5 7.5-2.5 5.5a3.1 3.1 0 0 0 5 0z'/%3E%3Cpath d='m19 7.5-2.5 5.5a3.1 3.1 0 0 0 5 0z'/%3E%3C/svg%3E"); --icon-fact-country: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.5 21V4'/%3E%3Cpath d='M5.5 4.8c2.4-1.3 4.7-1.3 6.8 0s4.3 1.3 6.2 0v8.4c-1.9 1.3-4.1 1.3-6.2 0s-4.4-1.3-6.8 0'/%3E%3C/svg%3E"); --icon-fact-city: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 20.5h17'/%3E%3Cpath d='M5 20.5V8.5L10 6v14.5'/%3E%3Cpath d='M14 20.5v-13l5 2v11'/%3E%3Cpath d='M7.4 10.5h.01M7.4 13.5h.01M7.4 16.5h.01M16.6 12h.01M16.6 15h.01M16.6 18h.01'/%3E%3C/svg%3E"); --icon-fact-postal: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8.5A2.5 2.5 0 0 1 6.5 6H14v11.5H6.5A2.5 2.5 0 0 1 4 15z'/%3E%3Cpath d='M14 6h3.5A2.5 2.5 0 0 1 20 8.5v6.5a2.5 2.5 0 0 1-2.5 2.5H14'/%3E%3Cpath d='M7.5 9.75h3'/%3E%3C/svg%3E"); --icon-fact-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='m8.5 12.5 2.5 2.5 4.5-5.5'/%3E%3C/svg%3E"); --icon-fact-status: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5 5 6v5.5c0 4.3 3 7.6 7 9 4-1.4 7-4.7 7-9V6z'/%3E%3C/svg%3E"); --nav-h: 3.25rem; --mark-size: 2.25rem; --fs-2xs: 0.875rem; --fs-xs: clamp(0.875rem, 0.86rem + 0.09vw, 0.9375rem); --fs-sm: clamp(0.9375rem, 0.92rem + 0.11vw, 1rem); --fs-base: clamp(1rem, 0.98rem + 0.14vw, 1.0625rem); --fs-md: clamp(1.0625rem, 1.03rem + 0.18vw, 1.125rem); --fs-control: var(--fs-base); --auth-w: 40rem; --platform-auth-w: 35rem; --page-w: 50rem; --side-w: 15rem; --side-rail-w: 4.5rem; --glass-blur: 22px; --glass-filter: blur(var(--glass-blur)) saturate(1.7); --page-wash-color: color-mix(in srgb, var(--brand) 7%, var(--bg-body)); --page-wash: linear-gradient( 155deg, color-mix(in srgb, var(--brand) 7%, var(--bg-body)) 0%, var(--bg) 72% ); --glass-bg: linear-gradient( 165deg, color-mix(in srgb, var(--gray-0) 88%, transparent) 0%, color-mix(in srgb, var(--gray-0) 62%, transparent) 54%, color-mix(in srgb, var(--gray-25) 76%, transparent) 100% ); --glass-bar-bg: linear-gradient( 165deg, color-mix(in srgb, var(--gray-0) 96%, transparent) 0%, color-mix(in srgb, var(--gray-0) 88%, transparent) 54%, color-mix(in srgb, var(--gray-25) 93%, transparent) 100% ); --glass-border: color-mix(in srgb, var(--brand) 18%, var(--border)); --glass-edge: 0 1px 0 color-mix(in srgb, var(--gray-0) 88%, transparent) inset; --nav-hover-bg: color-mix(in srgb, var(--red-100) 62%, transparent); --nav-active-bg: color-mix(in srgb, var(--red-200) 70%, transparent); --shadow-register: 5px 5px 0 -3px color-mix(in srgb, var(--ember-500) 16%, transparent); --glass-shadow: 0 8px 26px color-mix(in srgb, var(--brand) 8%, transparent); --shadow-lift: -20px -16px 38px -22px color-mix(in srgb, var(--red-500) 58%, transparent), 26px 20px 46px -26px color-mix(in srgb, var(--ember-400, var(--ember-300)) 62%, transparent), 0 30px 56px -32px rgba(var(--sh-color), .55), 9px 9px 0 -3px color-mix(in srgb, var(--ember-500) 21%, transparent), var(--glass-edge); --shadow-bar: 0 16px 30px -24px rgba(var(--sh-color), .42); --glass-field-bg: color-mix(in srgb, var(--gray-0) 68%, transparent); --glass-field-border: color-mix(in srgb, var(--brand) 24%, var(--field-border)); --field-fill-solid: color-mix(in srgb, var(--gray-0) 88%, var(--gray-100)); --glass-alert-bg: linear-gradient( 150deg, color-mix(in srgb, var(--red-50) 94%, transparent), color-mix(in srgb, var(--red-100) 80%, transparent) ); --glass-alert-border: color-mix(in srgb, var(--red-300) 55%, transparent); --tip-border: color-mix(in srgb, var(--red-300) 55%, transparent); --tip-shadow: 0 1px 2px rgba(var(--sh-color), .06), 0 10px 22px -12px color-mix(in srgb, var(--red-500) 45%, transparent), 4px 4px 0 -3px color-mix(in srgb, var(--ember-500) 22%, transparent); /* ---- Spacing: the half-steps base.css does not carry ------------------- base.css owns the main rhythm — --sp-1 .25rem, --sp-2 .5rem, --sp-3 .75rem, --sp-4 1rem, --sp-5 1.5rem, --sp-6 2rem, --sp-7 3rem, --sp-8 4rem. The app had grown a parallel, unnamed scale beside it: 2px, 6px, 10px and 14px appeared 30+ times as literals, which is why two "identical" paddings could differ by 2px and nobody could see why. These are those values, named — four half-steps at the bottom, where the eye actually notices 2px, and two more (20px, 28px) between --sp-4 and --sp-6, where base.css jumps 16 → 24 → 32 and the branch workspace and the console had both quietly invented their own rungs to land on. A padding that is not on one of the two scales is a bug, not a nuance. The one exception is a literal 1px/2px nudge: that is a hairline, the same order as a border, and it is not rhythm. */ --sp-05: 0.125rem; /* 2px */ --sp-1-5: 0.375rem; /* 6px */ --sp-2-5: 0.625rem; /* 10px */ --sp-3-5: 0.875rem; /* 14px */ --sp-4-5: 1.25rem; /* 20px */ --sp-5-5: 1.75rem; /* 28px */ /* ---- Control geometry -------------------------------------------------- base.css sizes the real form controls (--control-h 2.75rem, -sm 2.25rem, -lg 3rem). Navigation rows are not form controls and carry their own height, which was retyped as `2.25rem` in eight places across three files: a rail entry, a top-bar pill, a menu row and the collapse button all have to agree or the header looks hand-assembled. */ --nav-item-h: 2.25rem; --nav-icon-size: 1.05rem; /* Any picture that is mid-upload dims to this. Four components say it (.avatar, .place-photo, .company-mark, .document-photo) across two files. */ --busy-opacity: .6; /* ---- Shared stacking order ------------------------------------------- Navigation must not cover overlays or critical status messages. Popovers may rise over navigation; dialogs rise over popovers; status feedback stays readable even during a dialog. Keep these roles shared. */ --z-under: -1; /* decorative layers */ --z-base: 1; /* local content */ --z-raised: 2; /* local foreground */ --z-sticky: 10; /* side rail */ --z-sticky-bar: 40; /* workspace subnavigation */ --z-header: 80; /* primary navigation */ --z-dropdown: 120; /* dropdowns and console top controls */ --z-panel: 140; /* selects, menus, and floating panels */ --z-modal: 200; /* application dialogs and modal backdrops */ --z-toast: 260; /* shared status and alert feedback */ /* ---- Breakpoints ------------------------------------------------------- A custom property cannot be used inside a media query, so these are the single written record of the three widths the app is allowed to break at, and every @media in public/styles/ quotes one of them. Before this there were three: 30rem, 52rem and 960px — the last one in a different unit, so it did not even move with the user's font size like the other two. --bp-sm 30rem 480px phone: the auth card goes frameless --bp-md 52rem 832px two-up panels stack --bp-lg 60rem 960px the console's rail stops being a column */ --bp-sm: 30rem; --bp-md: 52rem; --bp-lg: 60rem; } /* ---------------------------------------------------------------- ground -- Three rules, and they belong here rather than in a component file because they are app-wide facts, not widgets. */ /* base.css reserves the scrollbar gutter globally; the app's pages are all taller than the viewport, so reserving it a second time only adds a stripe. */ html { scrollbar-gutter: auto; } /* The auth pages sit on the warm wash, where the base link colour is the only one with enough contrast. Scoped to .auth, so it owns no class of its own. */ .auth a, .auth a:visited { color: var(--link); } .auth a:hover { color: var(--link-hover); } /* The minor units of a money amount (the `.500` of OMR 12.500), rendered a shade smaller than the major units but never below 14px. */ .num-dec { font-size: max(.8em, var(--fs-2xs)); opacity: .8; } }