/* Reserved regions already include UIKit's interactive margins. These rules
   protect the surfaces that can reach them, without permanently shrinking the
   collection or adding the same inset to an existing navigation rail. */
@media (max-width: 767px) {
  html[data-duo-reserved="true"] .welcome .wtop {
    padding-top: max(calc(var(--space-10) + var(--space-4)), calc(var(--duo-occlusion-top) + var(--space-4)));
    padding-left: max(var(--space-8), calc(var(--duo-occlusion-left) + var(--space-4)));
    padding-right: max(var(--space-8), calc(var(--duo-occlusion-right) + var(--space-4)));
  }
}

@media (min-width: 768px), (min-width: 440px) and (max-height: 720px) {
  html.logged-in[data-duo-reserved="true"] {
    --duo-rail-safe-left: max(0px, calc(var(--safe-inline-left) - min(var(--rail-w), var(--duo-rail-overlap-left))));
    --duo-rail-safe-right: max(0px, calc(var(--safe-inline-right) - min(var(--rail-w), var(--duo-rail-overlap-right))));
  }
  html.logged-in[data-duo-reserved="true"] #sidebar {
    --duo-rail-top: var(--duo-rail-top-left);
    width: calc(var(--rail-w) + var(--duo-rail-safe-left));
    padding-top: max(calc(var(--space-4) + env(safe-area-inset-top, 0px)), calc(var(--duo-rail-top) + var(--space-4)));
    padding-left: calc(var(--space-3) + var(--duo-rail-safe-left));
  }
  html.logged-in[data-duo-reserved="true"] #app { margin-left: calc(var(--rail-w) + var(--duo-rail-safe-left)); }
  html.logged-in[data-duo-reserved="true"] #topbar { left: calc(var(--rail-w) + var(--duo-rail-safe-left)); }
  html.logged-in[data-duo-reserved="true"][data-rail-side="right"] #sidebar {
    --duo-rail-top: var(--duo-rail-top-right);
    width: calc(var(--rail-w) + var(--duo-rail-safe-right));
    padding-left: var(--space-3);
    padding-right: calc(var(--space-3) + var(--duo-rail-safe-right));
  }
  html.logged-in[data-duo-reserved="true"][data-rail-side="right"] #app {
    margin-left: 0;
    margin-right: calc(var(--rail-w) + var(--duo-rail-safe-right));
  }
  html.logged-in[data-duo-reserved="true"][data-rail-side="right"] #topbar {
    left: 0;
    right: calc(var(--rail-w) + var(--duo-rail-safe-right));
    padding-left: max(var(--space-5), var(--safe-inline-left), var(--duo-occlusion-left));
    padding-right: max(var(--space-5), calc(var(--duo-occlusion-right) - var(--rail-w)));
  }
  html.logged-in[data-duo-reserved="true"][data-rail-side="left"] #topbar {
    padding-right: max(var(--space-5), var(--safe-inline-right), var(--duo-occlusion-right));
    padding-left: max(var(--space-5), calc(var(--duo-occlusion-left) - var(--rail-w)));
  }
}

/* The backdrop still covers the entire screen for dismissal. Only its content
   box moves into the largest readable rectangle clear of every active region. */
html[data-duo-reserved="true"][data-duo-fold] #modal-root > .modal-backdrop:not(:has(.lv-table-mode)) {
  align-items: center;
  justify-content: center;
  padding-top: max(var(--space-2), calc(var(--duo-panel-layout-top) - var(--shell-viewport-top) + var(--space-2)));
  padding-left: calc(var(--duo-panel-left) + var(--space-2));
  padding-right: calc(100vw - var(--duo-panel-left) - var(--duo-panel-width) + var(--space-2));
  padding-bottom: max(var(--space-2), calc(var(--shell-viewport-height) - var(--duo-panel-layout-top) + var(--shell-viewport-top) - var(--duo-panel-height) + var(--space-2)));
  box-sizing: border-box;
}
html[data-duo-reserved="true"] #modal-root .modal:not(.lv-table-mode) {
  width: min(640px, 100%);
  max-width: 100%;
  max-height: 100%;
}

/* Table mode owns the full two-region canvas. Keep its upper content clear of
   side occlusions without changing the fold's row coordinate or its keypad. */
html[data-duo-reserved="true"] #modal-root .modal.lv-table-mode:has(#lv-body) {
  --duo-table-header-top: max(env(safe-area-inset-top, 0px), var(--duo-occlusion-top));
  grid-template-rows: calc(56px + var(--duo-table-header-top)) minmax(0, calc(var(--lv-table-fold) - 56px - var(--duo-table-header-top))) var(--lv-table-gap) minmax(0, 1fr);
}
html[data-duo-reserved="true"] #modal-root .lv-table-mode > .modal-head { padding-top: var(--duo-table-header-top); }
html[data-duo-reserved="true"] #modal-root .lv-table-mode > .modal-head,
html[data-duo-reserved="true"] #modal-root .lv-table-mode .lv-table-board {
  padding-left: max(var(--space-5), var(--safe-inline-left), calc(var(--duo-occlusion-left) + var(--space-3)));
  padding-right: max(var(--space-5), var(--safe-inline-right), calc(var(--duo-occlusion-right) + var(--space-3)));
}