/* Folding the two columns away, and the chevron that does it.
 *
 * Material has no desktop toggle for either column -- its own drawer is mobile-only -- and the two
 * of them cost 484 of 1440 pixels on a laptop. That matters here more than on most sites: the Play
 * page embeds the game in an iframe whose width is whatever is left after both columns, and at 688
 * pixels the game is below its own breakpoint for the desktop layout. Folding them is how a reader
 * gives the thing on the page the room it was written for.
 *
 * Folding narrows a column to a rail rather than removing it. The chevron sits at that column's
 * inner edge -- the edge facing the text -- and a rail keeps it in the one place the reader will
 * look for it, which `display: none` cannot do: it takes the only way back with it.
 *
 * The breakpoints are Material's own (76.25em for the navigation column, 60em for the table of
 * contents). They are not decoration: below them those columns are the *drawer*, parked off-canvas,
 * and narrowing one would leave a rail floating where the drawer used to be. So every rule here
 * only applies where the column is a column.
 */
.ppsds-fold {
  position: absolute; top: .1rem; z-index: 1; width: 1.2rem; height: 1.2rem;
  padding: 0; margin: 0; border: 0; background: none; cursor: pointer;
  color: var(--md-default-fg-color--light);
}
.ppsds-fold:hover { color: var(--md-accent-fg-color); }
.ppsds-fold svg { display: block; width: 1.2rem; height: 1.2rem; fill: currentcolor; }

/* The icon is a menu (three bars), so it needs no rotation to say which way the column folds;
   the folded state is marked by colour instead. */
.ppsds-fold[aria-pressed="true"] { color: var(--md-accent-fg-color); }

/* Below the breakpoints the column is the drawer, and the drawer already has a close button: a
   second one inside it would be one control too many for the same job. */
@media screen and (max-width: 76.25em) {
  .ppsds-fold--nav { display: none; }
}
@media screen and (max-width: 60em) {
  .ppsds-fold--toc { display: none; }
}

@media screen and (min-width: 76.25em) {
  /* The two columns cost 484 px of a 1440 px page at Material's defaults; a narrower pair gives
     the game iframe and the reading column some of it back. */
  .md-sidebar--primary { width: 10rem; }
  /* A row of its own above the navigation, so the button never lands on a nav item. */
  .md-sidebar--primary .md-sidebar__inner { padding-top: 1.5rem; }
  .md-sidebar--primary .ppsds-fold { right: .2rem; }
  body.ppsds-nav-folded .md-sidebar--primary { width: 2rem; }
  body.ppsds-nav-folded .md-sidebar--primary .md-sidebar__scrollwrap { display: none; }
}
@media screen and (min-width: 60em) {
  .md-sidebar--secondary { width: 10rem; }
  .md-sidebar--secondary .md-sidebar__inner { padding-top: 1.5rem; }
  .md-sidebar--secondary .ppsds-fold { left: .2rem; }
  body.ppsds-toc-folded .md-sidebar--secondary { width: 2rem; }
  body.ppsds-toc-folded .md-sidebar--secondary .md-sidebar__scrollwrap { display: none; }
}


/* Collapsible branches in the table of contents. The chevron sits at the far right of the entry
   and only appears on entries that have children; the collapsed state hides the nested list but
   leaves the parent link, so the reader can always get back. */
.md-nav--secondary li.md-nav__item {
  position: relative;
}
.md-nav--secondary li.md-nav__item > .md-nav__link {
  padding-right: 1.25rem;
}
.md-nav--secondary .ppsds-toc-toggle {
  position: absolute;
  top: .18rem;
  right: 0;
  width: 1.05rem;
  height: 1.05rem;
  padding: 0;
  margin: 0;
  border: 0;
  background: none;
  cursor: pointer;
  color: var(--md-default-fg-color--light);
}
.md-nav--secondary .ppsds-toc-toggle:hover {
  color: var(--md-accent-fg-color);
}
.md-nav--secondary .ppsds-toc-toggle svg {
  display: block;
  width: 1.05rem;
  height: 1.05rem;
  fill: currentcolor;
  transform: rotate(180deg);
  transition: transform 0.15s ease;
}
.md-nav--secondary li.ppsds-toc-closed > ul,
.md-nav--secondary li.ppsds-toc-closed > nav {
  display: none;
}
.md-nav--secondary li.ppsds-toc-closed > .ppsds-toc-toggle svg {
  transform: rotate(0deg);
}