/* Layout for pages that carry the course sidebar.
 *
 * Its own file, not part of either theme: it is pure geometry with no colour
 * in it, and duplicating it across theme-light.scss and theme-dark.scss would
 * be two copies to keep in step.
 *
 * Quarto's default page grid centres everything. At 1600px it resolves to two
 * flexible 123px columns either side of the fixed block, so the sidebar drifts
 * inward as the window grows and the reading column floats in the middle of
 * the screen. That is a reasonable default for an article and the wrong one
 * for course material, where the sidebar is navigation and belongs at the
 * edge of the window.
 *
 * So the flexible column on the left is collapsed and all the slack is given
 * to the one on the right: the sidebar sits at the left edge, the gutter and
 * the reading column are fixed, and a wider window adds empty space on the
 * right rather than pushing the text around.
 *
 * Scoped to body.nav-sidebar, which Quarto sets only on pages that have one.
 * Notes keep Quarto's centred layout, and so does the Tufte template, whose
 * margin columns are tuned to it.
 */

:root {
  /* Overridden per-visitor by the drag handle; see _head.html. */
  --nb-sidebar-width: 250px;
  --nb-sidebar-min: 180px;
  --nb-sidebar-max: 460px;
  /* Wider than Quarto's 27px: the sidebar is a different kind of thing from
   * the text and wants clear air between them. Separate values either side,
   * because they are doing different jobs — the left one separates navigation
   * from prose, the right one keeps the table of contents from reading as a
   * second column of the text. */
  --nb-gutter: 3.5rem;
  --nb-gutter-toc: 4.5rem;
  --nb-body-width: 746px;
  --nb-margin-width: 250px;
  --nb-edge: 1.75rem;
}

@media (min-width: 992px) {
  body.nav-sidebar #quarto-content.page-columns {
    grid-template-columns:
      [screen-start] var(--nb-edge)
      /* Collapsed. This is the column that used to centre the page. */
      [screen-start-inset] 0px
      /* The sidebar spans page-start → body-start, so its width lives here
       * and the other two columns in that span are zero. `auto` rather than a
       * fixed value so the column follows the element when it is dragged. */
      [page-start] auto
      [page-start-inset] 0px
      [body-start-outset] 0px
      [body-start] var(--nb-gutter)
      [body-content-start] var(--nb-body-width)
      [body-content-end] var(--nb-gutter-toc)
      /* The margin column, which holds the table of contents. */
      [body-end] 0px
      [body-end-outset] var(--nb-margin-width)
      [page-end-inset] 0px
      /* All the slack, so growing the window adds space here and nowhere else. */
      [page-end] 1fr
      [screen-end-inset] var(--nb-edge)
      [screen-end];
  }

  body.nav-sidebar #quarto-sidebar {
    width: var(--nb-sidebar-width);
    min-width: var(--nb-sidebar-min);
    max-width: var(--nb-sidebar-max);
    /* The browser's own handle, rather than a hand-written drag implementation.
     * The sidebar already carries overflow-auto, which `resize` requires. */
    resize: horizontal;
  }
}