/* ============================================================ MAIN ------------------------------------------------------------ The single stylesheet every page loads. Base and shared layers live at /css/styles/.css. Page-specific layers live at /css/styles/pages/.css. Cascade order below matters — every page-specific layer assumes the base layers above it have already loaded. Total: 23 imports. Every file is loaded exactly once. The internal @import chains inside the page-specific files resolve to cached resources — no double download. ============================================================ CASCADE ORDER AT A GLANCE ============================================================ 01 · foundation design tokens + reset + base rules + typography + container + utilities + accessibility + layout primitives + responsive breakpoints + print base 02 · components atomic primitives: buttons, badges, chips, avatars, dividers, icons, progress, skeletons, watermark, surfaces, brand, count bubble, spinner 03 · forms every form control and validation state 04 · cards every card variant 05 · navigation header, sidebar, bottom nav, drawer, footer, tabs, pagination, breadcrumb, page header, search 06 · overlays modal, drawer kill-switch, toast, splash, page loader, alerts 07 · data table wrapper, filter panel, filter pills, mobile filter trigger, sticky sidebar 08 · auth auth shell, Google button, auth callback, onboarding 09 · app authenticated app shell ─── page-specific layers (/css/pages/) ──────────────── 10 · tasks task pages + shared .mk-* details 11 · services service pages @imports ../tasks.css 12 · jobs job pages @imports ./services.css 13 · applications applications page shell @imports ../tasks.css 14 · home public landing page @imports ./jobs.css 15 · profile profile, portfolio, edit-profile, org-profile 16 · dashboard personal / business / admin dashboards + range picker 17 · legal privacy, terms, 404, offline 18 · pages about, help, saved 19 · subscriptions subscription, settings, business-settings @imports ../profile.css 20 · messages messages, business-messages, notifications @imports ../subscriptions.css 21 · admin every admin-* page shell @imports ../subscriptions.css 22 · business organization shells @imports ../profile.css ─── final layer ───────────────────────────────────────── 23 · theme safe-area, focus-visible guard, prefers-contrast, forced-colors, body scroll lock, print consolidation. MUST be last. ============================================================ NOTES ON THE @import CHAINS ============================================================ Several page-specific files declare their own @import at the top. When loaded via main.css those chains resolve to already-cached resources — no additional network cost. The chains use relative paths because the CSS lives in /css/pages/: services.css → ../tasks.css jobs.css → ./services.css → ../tasks.css applications.css → ../tasks.css home.css → ./jobs.css → ./services.css → ../tasks.css subscriptions.css → ../profile.css messages.css → ../subscriptions.css → ../profile.css admin.css → ../subscriptions.css → ../profile.css business.css → ../profile.css A future move back to per-page linking still works — a single link to /css/styles/pages/jobs.css pulls the entire task / service / job family via the chain. ============================================================ */ /* ============================================================ BASE LAYERS (/css/) ============================================================ */ /* ============================================================ 01 · FOUNDATION ============================================================ */ @import url("./foundation.css"); /* ============================================================ 02 · COMPONENTS ============================================================ */ @import url("./components.css"); /* ============================================================ 03 · FORMS ============================================================ */ @import url("./forms.css"); /* ============================================================ 04 · CARDS ============================================================ */ @import url("./cards.css"); /* ============================================================ 05 · NAVIGATION ============================================================ */ @import url("./navigation.css"); /* ============================================================ 06 · OVERLAYS ------------------------------------------------------------ Loaded AFTER navigation.css so its drawer / action-sheet kill-switch wins over the base rules in navigation.css. ============================================================ */ @import url("./overlays.css"); /* ============================================================ 07 · DATA DISPLAY ============================================================ */ @import url("./data.css"); /* ============================================================ 08 · AUTH ============================================================ */ @import url("./auth.css"); /* ============================================================ 09 · APP SHELL ============================================================ */ @import url("./app.css"); /* ============================================================ PAGE-SPECIFIC LAYERS (/css/pages/) ============================================================ */ /* ============================================================ 10 · TASKS ============================================================ */ @import url("./pages/tasks.css"); /* ============================================================ 11 · SERVICES ------------------------------------------------------------ Internally imports ../tasks.css — already loaded. ============================================================ */ @import url("./pages/services.css"); /* ============================================================ 12 · JOBS ------------------------------------------------------------ Internally imports ./services.css → ../tasks.css — both already loaded. ============================================================ */ @import url("./pages/jobs.css"); /* ============================================================ 13 · APPLICATIONS ------------------------------------------------------------ Internally imports ../tasks.css — already loaded. ============================================================ */ @import url("./pages/applications.css"); /* ============================================================ 14 · HOME ------------------------------------------------------------ Internally imports ./jobs.css → ./services.css → ../tasks.css — all already loaded. ============================================================ */ @import url("./pages/home.css"); /* ============================================================ 15 · PROFILE ============================================================ */ @import url("./pages/profile.css"); /* ============================================================ 16 · DASHBOARD ============================================================ */ @import url("./pages/dashboard.css"); /* ============================================================ 17 · LEGAL ============================================================ */ @import url("./pages/legal.css"); /* ============================================================ 18 · PAGES ------------------------------------------------------------ About, help, saved. ============================================================ */ @import url("./pages.css"); /* ============================================================ 19 · SUBSCRIPTIONS ------------------------------------------------------------ Internally imports ../profile.css — already loaded. ============================================================ */ @import url("./pages/subscriptions.css"); /* ============================================================ 20 · MESSAGES ------------------------------------------------------------ Internally imports ../subscriptions.css → ../profile.css — both already loaded. ============================================================ */ @import url("./pages/messages.css"); /* ============================================================ 21 · ADMIN ------------------------------------------------------------ Internally imports ../subscriptions.css → ../profile.css — both already loaded. ============================================================ */ @import url("./pages/admin.css"); /* ============================================================ 22 · BUSINESS ------------------------------------------------------------ Internally imports ../profile.css — already loaded. ============================================================ */ @import url("./pages/business.css"); /* ============================================================ FINAL LAYER (/css/) ============================================================ */ /* ============================================================ 23 · THEME — MUST BE LAST ------------------------------------------------------------ Safe-area, focus-visible guard, prefers-contrast, forced-colors, body scroll lock, print consolidation. Wins every cascade tie. ============================================================ */ @import url("./theme.css"); /* ============================================================ END OF MAIN ------------------------------------------------------------ Verification: ✅ 23 imports. ✅ File locations: /css/styles/foundation.css /css/styles/components.css /css/styles/forms.css /css/styles/cards.css /css/styles/navigation.css /css/styles/overlays.css /css/styles/data.css /css/styles/auth.css /css/styles/app.css /css/styles/pages.css /css/styles/theme.css /css/styles/pages/tasks.css /css/styles/pages/services.css /css/styles/pages/jobs.css /css/styles/pages/applications.css /css/styles/pages/home.css /css/styles/pages/profile.css /css/styles/pages/dashboard.css /css/styles/pages/legal.css /css/styles/pages/subscriptions.css /css/styles/pages/messages.css /css/styles/pages/admin.css /css/styles/pages/business.css ✅ Cross-directory @import chains use relative paths (../.css from inside /css/styles/pages/). ✅ Every page links exactly one stylesheet: ✅ Cascade order is safe: base layers → foundation → components → forms → cards → navigation → overlays → data → auth → app page layers → tasks → services → jobs → applications → home → profile → dashboard → legal → pages → subscriptions → messages → admin → business final → theme ============================================================ */