. Without this rule also becomes the app grid * and reserves a sidebar column for a sidebar that is not its own child; * the wrapper is then auto-placed into that column and its own grid * subtracts the sidebar width again, collapsing the main area. * * Measured at a 1440px viewport before this rule: * wrapper 260px · .mk-app-main 48px · .mk-app-main__inner 0px * which is what rendered body text one letter per line. * * The app grid must exist only on the inner wrapper. This is a CSS-only * correction: pages/ and assets/js/ belong to the frozen 134-file manifest * and are NOT modified. Specificity (element+class) intentionally beats the * plain .mk-layout-app rule above. */ body.mk-layout-app { display: block; } .mk-layout-app > .mk-app-sidebar { grid-area: sidebar; min-width: 0; padding: var(--mk-space-5) var(--mk-space-4); } .mk-layout-app > .mk-app-topbar { grid-area: topbar; min-width: 0; } .mk-app-main { grid-area: main; min-width: 0; padding: var(--mk-space-6); } .mk-app-main__inner { width: min(100%, var(--mk-container-app-max)); margin-inline: auto; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--mk-space-6); } .mk-layout-app--admin .mk-app-main__inner { width: min(100%, var(--mk-container-admin-max)); } .mk-app-content-grid { display: grid; min-width: 0; gap: var(--mk-space-6); grid-template-columns: minmax(0, 1fr) minmax(280px, 360px); } .mk-app-content-grid > * { min-width: 0; } .mk-detail-panel { align-self: start; } /* ------------------------------------------------------------------ FAMILY D — PRODUCER Mobile-first, secondary to WhatsApp. ------------------------------------------------------------------ */ .mk-layout-producer { min-height: 100vh; background: var(--mk-color-background); } .mk-producer-shell { width: min(100%, var(--mk-producer-shell-max)); margin-inline: auto; padding: var(--mk-space-4) var(--mk-page-gutter-mobile) var(--mk-space-10); } .mk-producer-actions { display: grid; gap: var(--mk-space-3); grid-template-columns: 1fr; } .mk-layout-producer .mk-site-header__inner { width: min( calc(100% - (2 * var(--mk-page-gutter-mobile))), var(--mk-producer-shell-max) ); } /* ------------------------------------------------------------------ FAMILY E — LOGISTICS Field-oriented, mobile-first. ------------------------------------------------------------------ */ .mk-layout-logistics { min-height: 100vh; background: var(--mk-color-background); } .mk-logistics-shell { width: min(100%, var(--mk-logistics-shell-max)); margin-inline: auto; padding: var(--mk-space-4) var(--mk-page-gutter-mobile) var(--mk-space-10); } .mk-logistics-task-list { display: grid; gap: var(--mk-space-4); } .mk-logistics-actions { display: grid; gap: var(--mk-space-3); grid-template-columns: 1fr; } .mk-layout-logistics .mk-site-header__inner { width: min( calc(100% - (2 * var(--mk-page-gutter-mobile))), var(--mk-logistics-shell-max) ); } /* ------------------------------------------------------------------ FAMILY F — AUTHENTICATION / UTILITY ------------------------------------------------------------------ */ .mk-layout-auth { min-height: 100vh; display: grid; place-items: center; padding: var(--mk-space-6) var(--mk-page-gutter-mobile); background: var(--mk-color-background); } .mk-auth-shell { width: min(100%, 480px); display: grid; gap: var(--mk-space-6); } .mk-auth-brand { display: grid; justify-items: start; gap: var(--mk-space-3); } .mk-auth-panel { padding: var(--mk-space-6); background: var(--mk-color-surface); border: var(--mk-border-width) solid var(--mk-color-border); border-radius: var(--mk-radius-lg); } /* ------------------------------------------------------------------ APPROVED BREAKPOINTS ------------------------------------------------------------------ */ @media (max-width: 900px) { .mk-grid--3, .mk-grid--4, .mk-public-hero__inner, .mk-app-content-grid { grid-template-columns: minmax(0, 1fr); } .mk-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 860px) { .mk-layout-app, .mk-layout-app--admin { display: block; } .mk-layout-app > .mk-app-sidebar { position: static; } .mk-layout-app > .mk-app-topbar { min-height: 56px; padding-inline: var(--mk-page-gutter-mobile); } .mk-app-main { padding: var(--mk-space-5) var(--mk-page-gutter-mobile) var(--mk-space-8); } } @media (max-width: 640px) { .mk-section { padding-block: var(--mk-space-8); } .mk-public-hero { padding-block: var(--mk-space-10); } .mk-grid--2, .mk-grid--4 { grid-template-columns: 1fr; } .mk-auth-panel { padding: var(--mk-space-4); } }