/* The corner menu (spec 4.4). Without JavaScript the column is always shown and MENU is hidden;
   with it (html.js), MENU opens and closes the column. On phones the open column is a full sheet. */
.menu {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.menu__toggle {
  display: none;
}

.js .menu__toggle {
  display: inline-block;
}

.menu__list {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1.1em;
  margin-top: 1.1em;
}

.js .menu__list:not(.is-open) {
  display: none;
}

/* Without JavaScript the column sits in the page's flow (base.css), level with the lockup. */
:root:not(.js) .menu__list {
  margin-top: 0;
}

/* On short screens the open column scrolls, and it stops above the display controls. The padding
   keeps focus outlines inside the scroll box, which would otherwise clip them. */
.js .menu__list {
  max-height: calc(89vh - 6em);
  max-height: calc(89dvh - 6em);
  overflow-y: auto;
  margin: .7em -.4em 0 0;
  padding: .4em;
}

.menu__group {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: .95em;
}

@keyframes menu-item-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

:root:not([data-motion="off"]) .menu__list.is-open li {
  animation: menu-item-in .5s ease both;
}

.menu__list.is-open .menu__group:nth-child(2) li { animation-delay: .08s; }
.menu__list.is-open .menu__group:nth-child(3) li { animation-delay: .16s; }

/* Below 64rem the open menu is a full sheet; from 64rem up it is a column in the page's right-hand
   margin, clear of the content (base.css, --corner-reach). */
@media (max-width: 63.99rem) {
  /* The shell's MENU stays above its open sheet. Only the one in the corner: a menu shown inside
     the page (the catalog's samples) must stay under the edge veils like the rest of the page. */
  .shell-corner .menu__toggle {
    position: relative;
    z-index: 5;
  }

  /* The corner holding the open sheet rises above the other corners, so they do not show through. */
  .shell-corner:has(.menu__list.is-open) {
    z-index: 6;
  }

  .menu__list.is-open {
    position: fixed;
    inset: 0;
    z-index: 4;
    max-height: none;
    margin: 0;
    padding: calc(var(--edge-block) + 3rem) var(--edge-inline) var(--edge-block);
    overflow-y: auto;
    gap: 1.6em;
    background: var(--paper);
  }
}