/*
 * EmlogStudio daylight homepage viewport repair.
 *
 * This final homepage-only layer intentionally restores the same desktop
 * spatial contract used by the dark mode. The page body remains locked while
 * the central workspace owns the complete vertical scroll range.
 */

@media (min-width: 821px) {
  html[data-theme="light"] body.emstudio-view-home {
    height: 100vh;
    min-height: 0;
    overflow: hidden;
  }

  /* Keep the daylight home on the dark-mode 14px shell grid. Daylight can
   * change colour, but must never move the navigation rail or resize cards. */
  html[data-theme="light"] body.emstudio-view-home .app-shell.home-viewport-shell {
    grid-template-columns: 190px minmax(0, 1fr) 276px;
    grid-template-rows: minmax(0, 1fr);
    gap: 18px;
    width: min(1536px, calc(100% - 28px));
    height: calc(100vh - 28px);
    min-height: 0;
    max-height: calc(100vh - 28px);
    margin: 14px auto;
    align-items: stretch;
  }

  /* Give the home workspace an actual finite containing height. The previous
   * daylight padding was part of its available height and could leave the
   * route/footer outside the scrollable range. */
  html[data-theme="light"] body.emstudio-view-home .home-workspace-frame {
    align-self: stretch;
    display: grid;
    height: 100%;
    min-height: 0;
    max-height: 100%;
    grid-template-rows: auto auto auto;
    align-content: start;
    padding: 7px 4px 0 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    scrollbar-color: rgba(var(--accent-rgb), .28) transparent;
    scrollbar-gutter: stable;
    scrollbar-width: thin;
  }

  html[data-theme="light"] body.emstudio-view-home .home-workspace-frame::-webkit-scrollbar {
    width: 5px;
  }

  html[data-theme="light"] body.emstudio-view-home .home-workspace-frame::-webkit-scrollbar-thumb {
    background: rgba(var(--accent-rgb), .24);
    border-radius: 999px;
  }

  @supports not (scrollbar-gutter: stable) {
    html[data-theme="light"] body.emstudio-view-home .home-workspace-frame {
      overflow-y: scroll;
    }
  }

  /* Match the original home rhythm: no day-only divider and no accumulated
   * top spacing between the top bar and the statistics grid. */
  html[data-theme="light"] body.emstudio-view-home .home-workspace-frame > .topbar {
    min-height: 74px;
    padding: 0;
    border-bottom: 0;
  }

  html[data-theme="light"] body.emstudio-view-home .home-workspace-frame > .emstudio-pjax-content > .home-route-view.active {
    min-height: 0;
    padding-top: var(--em-home-space-2, 8px);
  }

  /* The desktop navigation rail follows the same coordinates in both modes. */
  html[data-theme="light"] body.emstudio-view-home .app-shell.home-viewport-shell > .sidebar {
    top: 14px;
    left: max(14px, calc((100vw - 1536px) / 2));
    width: 190px;
    height: calc(100vh - 28px);
    min-height: 0;
  }
}

@media (min-width: 821px) and (max-width: 1280px) {
  html[data-theme="light"] body.emstudio-view-home .app-shell.home-viewport-shell {
    grid-template-columns: 74px minmax(0, 1fr) 260px;
  }

  html[data-theme="light"] body.emstudio-view-home .app-shell.home-viewport-shell > .sidebar {
    width: 74px;
  }
}

@media (min-width: 821px) and (max-width: 1080px) {
  html[data-theme="light"] body.emstudio-view-home .app-shell.home-viewport-shell {
    grid-template-columns: 74px minmax(0, 1fr);
  }
}

@supports (height: 100dvh) {
  @media (min-width: 821px) {
    html[data-theme="light"] body.emstudio-view-home {
      height: 100dvh;
    }

    html[data-theme="light"] body.emstudio-view-home .app-shell.home-viewport-shell {
      height: calc(100dvh - 28px);
      max-height: calc(100dvh - 28px);
    }

    html[data-theme="light"] body.emstudio-view-home .app-shell.home-viewport-shell > .sidebar {
      height: calc(100dvh - 28px);
    }
  }
}