/* Tablet shell/layout fixes (iPad/Android/Firefox tablets): stable viewport + scroll containers */
@media (min-width: 768px) and (hover: none), (min-width: 768px) and (pointer: coarse) {
  html, body, #root {
    height: 100%;
    min-height: 100%;
    min-height: -webkit-fill-available;
    min-height: 100svh;
  }

  .d-shell {
    height: 100%;
    min-height: 100%;
    min-height: 100svh;
    min-height: 100dvh;
    min-height: -webkit-fill-available;
    overflow: hidden;
  }

  .d-shell > aside {
    height: 100%;
    min-height: 0;
    max-height: 100dvh;
    max-height: 100svh;
    overflow: hidden;
    touch-action: none;
    overscroll-behavior: contain;
  }

  .d-main {
    height: 100%;
    min-height: 0;
    max-height: 100dvh;
    max-height: 100svh;
    -webkit-overflow-scrolling: touch;
    overflow-y: auto;
    touch-action: pan-y;
    overscroll-behavior-y: contain;
  }

  .d-main {
    padding-bottom: calc(48px + env(safe-area-inset-bottom, 0px));
  }

  .d-sidenav-icon {
    color: color-mix(in srgb, var(--wa-bright) 68%, var(--text));
  }

  .d-sidenav-item.active .d-sidenav-icon {
    color: var(--wa-bright);
    filter: drop-shadow(0 0 6px color-mix(in srgb, var(--wa) 55%, transparent));
  }

  .gd-layout {
    min-height: 100%;
    height: 100%;
    min-height: 100svh;
  }

  .gd-toc {
    position: relative;
    min-height: 0;
    height: calc(100% - 80px);
    max-height: 100%;
    max-height: calc(100svh - 80px);
    overflow-y: auto;
    touch-action: pan-y;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
  }

  .gd-content {
    min-height: 0;
    overflow-y: auto;
    touch-action: pan-y;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
  }
}