/* ============================================================ WEVORI GLOBAL APP GEOMETRY v2.0 FINAL AUTHORITY FOR PAGE POSITIONING Every application page uses this exact coordinate system. Page-specific CSS may style components, but must not redefine: - sidebar width - content origin - content top/side padding - title/progress/first-block axes IMPORTANT: load this stylesheet LAST in . ============================================================ */ :root{ --wevori-sidebar-width:240px; --wevori-content-left:52px; --wevori-content-right:52px; --wevori-content-top:40px; --wevori-content-bottom:64px; --wevori-title-gap:26px; --wevori-progress-gap:26px; } html,body{ margin:0!important; padding:0!important; width:100%!important; max-width:100%!important; overflow-x:hidden!important; } .app,.app-shell{ display:grid!important; grid-template-columns:var(--wevori-sidebar-width) minmax(0,1fr)!important; width:100%!important; max-width:100vw!important; min-width:0!important; min-height:100vh!important; margin:0!important; padding:0!important; } .sidebar{ width:var(--wevori-sidebar-width)!important; min-width:var(--wevori-sidebar-width)!important; max-width:var(--wevori-sidebar-width)!important; box-sizing:border-box!important; } main,.main{ width:100%!important; min-width:0!important; max-width:100%!important; margin:0!important; padding:0!important; box-sizing:border-box!important; } .topbar{ width:100%!important; max-width:100%!important; box-sizing:border-box!important; margin:0!important; } main > .content, .main > .content{ width:100%!important; max-width:none!important; min-width:0!important; box-sizing:border-box!important; margin:0!important; padding: var(--wevori-content-top) var(--wevori-content-right) var(--wevori-content-bottom) var(--wevori-content-left)!important; } /* Page wrappers may organise content, but never create a second page offset. */ main > .content.wip-wrap, main > .content > .planning-wrap, main > .content > .page-wrap, main > .content > .workspace-wrap{ width:100%!important; max-width:none!important; min-width:0!important; box-sizing:border-box!important; margin:0!important; padding:0!important; } main > .content > *, main > .content .planning-wrap > *{ min-width:0!important; max-width:100%; box-sizing:border-box; } /* All page titles begin on the same x/y origin. */ main > .content > .setup-head, main > .content > .wip-head, main > .content > .page-head, main > .content > .planning-wrap > .setup-head{ width:100%!important; box-sizing:border-box!important; margin:0 0 var(--wevori-title-gap)!important; padding:0!important; } main > .content > .setup-head h1, main > .content > .wip-head h1, main > .content > .page-head h1, main > .content > .planning-wrap > .setup-head h1{ margin-top:0!important; padding-top:0!important; } /* Progress lines use exactly the same left/right axis as the first card. */ main > .content > .progress, main > .content > .wip-progress{ width:100%!important; max-width:100%!important; min-width:0!important; box-sizing:border-box!important; margin-left:0!important; margin-right:0!important; margin-bottom:var(--wevori-progress-gap)!important; padding-left:0!important; padding-right:0!important; } /* First-level content blocks always begin on the shared page axis. */ main > .content > .workspace-grid, main > .content > .step2-compact, main > .content > .wip-card, main > .content > .panel, main > .content > .page-panel, main > .content > .content-panel, main > .content > .planning-wrap > .planning-sheet, main > .content > .planning-wrap > .archive-strip, main > .content > .planning-wrap > .calendar-card{ width:100%!important; max-width:100%!important; min-width:0!important; box-sizing:border-box!important; margin-left:0!important; margin-right:0!important; } /* Onboarding uses one grid on every step. */ main > .content > .workspace-grid, main > .content > .step2-compact{ display:grid!important; grid-template-columns:minmax(0,2fr) minmax(300px,1fr)!important; gap:28px!important; align-items:start!important; } main > .content .primary-panel, main > .content .step2-main, main > .content .sync-panel{ min-width:0!important; max-width:100%!important; box-sizing:border-box!important; } main > .content .info-card, main > .content .step2-help{ min-width:0!important; max-width:100%!important; box-sizing:border-box!important; } /* Controls can never force the application wider than its page column. */ input,textarea,select,table{ max-width:100%; box-sizing:border-box; } /* Standard template for future pages can use .page-head + .page-panel directly. */ .page-panel{ background:var(--surface,#fff); border:1px solid var(--line,#dfe3ec); border-radius:14px; } /* Responsive geometry remains shared too. */ @media(max-width:1050px){ main > .content > .workspace-grid, main > .content > .step2-compact{ grid-template-columns:1fr!important; } } @media(max-width:900px){ :root{ --wevori-content-left:28px; --wevori-content-right:28px; --wevori-content-top:30px; --wevori-content-bottom:48px; } .app,.app-shell{ grid-template-columns:1fr!important; } .sidebar{ display:none!important; } } @media(max-width:600px){ :root{ --wevori-content-left:20px; --wevori-content-right:20px; --wevori-content-top:24px; --wevori-content-bottom:36px; } } /* ============================================================ v2.3 — deterministic fixed sidebar geometry Sidebar is fixed. The application content is explicitly offset by exactly the sidebar width, so title, progress and first card can never slide underneath the navigation. ============================================================ */ .app,.app-shell{ display:block!important; width:100%!important; max-width:100vw!important; } .sidebar{ position:fixed!important; top:0!important; left:0!important; bottom:0!important; width:var(--wevori-sidebar-width)!important; min-width:var(--wevori-sidebar-width)!important; max-width:var(--wevori-sidebar-width)!important; height:100vh!important; min-height:100vh!important; overflow-y:auto!important; overflow-x:hidden!important; display:flex!important; flex-direction:column!important; box-sizing:border-box!important; z-index:100!important; } .sidebar .sidebar-bottom{ margin-top:auto!important; flex:0 0 auto!important; } .app > main, .app-shell > main, .app > .main, .app-shell > .main{ display:block!important; margin-left:var(--wevori-sidebar-width)!important; width:calc(100% - var(--wevori-sidebar-width))!important; max-width:calc(100% - var(--wevori-sidebar-width))!important; min-width:0!important; box-sizing:border-box!important; } /* These are the shared visible axes on every desktop page. */ main > .content, .main > .content{ padding-left:var(--wevori-content-left)!important; padding-right:var(--wevori-content-right)!important; } @media(max-width:900px){ .sidebar{ display:none!important; } .app > main, .app-shell > main, .app > .main, .app-shell > .main{ margin-left:0!important; width:100%!important; max-width:100%!important; } } /* ============================================================ v2.4 — FINAL content-axis authority Some legacy pages (notably WIP) contain `.content.wip-wrap` rules with !important. These selectors are more specific than the generic global rule and could cancel the shared 52px page inset. The application shell now wins explicitly. ============================================================ */ .app > main > section.content, .app-shell > main > section.content, .app > main > .content.wip-wrap, .app-shell > main > .content.wip-wrap{ width:100%!important; max-width:none!important; min-width:0!important; margin:0!important; box-sizing:border-box!important; padding: var(--wevori-content-top) var(--wevori-content-right) var(--wevori-content-bottom) var(--wevori-content-left)!important; } /* Title, progress line and first content block share one exact left edge. */ .app > main > section.content > .wip-head, .app > main > section.content > .setup-head, .app > main > section.content > .page-head, .app > main > section.content > .wip-progress, .app > main > section.content > .progress, .app > main > section.content > .wip-card, .app > main > section.content > .workspace-grid, .app > main > section.content > .step2-compact{ margin-left:0!important; margin-right:0!important; max-width:100%!important; box-sizing:border-box!important; }