/* The outer page frame is shared by every authenticated route. Load after the
   page styles so dossier and editor layouts cannot add a second outer gutter.
   Card padding, dialogs, the camera, sign-in and print keep their own geometry. */
@media screen {
  :root {
    --workspace-content-max:1440px;
    --workspace-page-gutter:24px;
    --workspace-inset:max(0px,calc((100% - var(--workspace-content-max) - 2 * var(--workspace-page-gutter)) / 2));
  }

  html body:not(.camera-mode):has(#navigation:not([hidden]))>.shell {
    width:auto;
    max-width:none;
    margin-inline:var(--workspace-inset);
    padding-inline:var(--workspace-page-gutter);
  }
  html body:not(.camera-mode):has(#navigation:not([hidden]))>.site-header {
    width:auto;
    max-width:none;
    margin-inline:calc(var(--workspace-inset) + var(--workspace-page-gutter));
  }
  html body:not(.camera-mode):has(#navigation:not([hidden]))>.shell>#content {
    min-width:0;
    padding-inline:0;
  }

  /* These are page roots, not the narrower forms or reading areas within them. */
  html body:not(.camera-mode):has(#navigation:not([hidden])) #content>:is(
    .employee-home,.add-inventory-page,.asset-editor-page,.asset-detail-page,
    .category-management-page,.notifications-page,.settings-page,.finance-recovery-page
  ) {
    width:100%;
    max-width:none;
    margin-inline:0;
  }

  /* Dossiers embed their header. Their body sections share its outer edges. */
  html[data-theme] body:not(.camera-mode) #content .doctor-profile-reference>:is(
    .doctor-profile-drawers,.doctor-profile-period,.doctor-profile-overview,
    .doctor-profile-finance,.doctor-profile-panel,.employee-period-disclosure,
    .cabinet-profile-period,.cabinet-dossier-panel,.dossier-drawer,
    .cabinet-profile-selection-message,.cabinet-presentation-error,
    .cabinet-management-layout,.cabinet-management-list,.cabinet-directory-finance-note
  ) {
    margin-inline:0;
  }
}

@media screen and (max-width:720px) {
  :root {--workspace-page-gutter:12px}
}
@media screen and (max-width:360px) {
  :root {--workspace-page-gutter:10px}
}

@media screen and (min-width:1180px) {
  :root {
    --workspace-page-gutter:var(--desktop-page-gutter);
    --workspace-frame-width:calc(var(--workspace-content-max) + var(--desktop-rail-width) + 2 * var(--desktop-page-gutter));
    --workspace-inset:max(0px,calc((100% - var(--workspace-frame-width)) / 2));
    --workspace-directory-space:0px;
  }
  body.directory-open {--workspace-directory-space:max(0px,calc(var(--directory-width) - var(--workspace-inset)))}

  html body:not(.camera-mode):has(#navigation:not([hidden]))>.shell,
  html body.directory-open:not(.camera-mode):has(#navigation:not([hidden]))>.shell,
  html body.directory-open:not(.camera-mode):has(#navigation:not([hidden])):has(.doctor-profile-reference)>.shell {
    width:auto;
    max-width:none;
    margin-left:calc(var(--workspace-inset) + var(--desktop-rail-width) + var(--workspace-directory-space));
    margin-right:var(--workspace-inset);
    padding-inline:var(--desktop-page-gutter);
  }
  html body:not(.camera-mode):has(#navigation:not([hidden]))>.site-header,
  html body.directory-open:not(.camera-mode):has(#navigation:not([hidden]))>.site-header {
    width:auto;
    max-width:none;
    margin-left:calc(var(--workspace-inset) + var(--desktop-rail-width) + var(--workspace-directory-space) + var(--desktop-page-gutter));
    margin-right:calc(var(--workspace-inset) + var(--desktop-page-gutter));
  }
  #navigation.bottom-nav {left:0}
  #navigation-directory.navigation-directory {left:var(--desktop-rail-width)}

  body:not(.camera-mode):has(.doctor-profile-reference) .shell>.notice:not([hidden]) {
    right:calc(var(--workspace-inset) + var(--desktop-page-gutter));
  }
}