/* 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. A scroll box clips
   what sticks out of it, and sideways it would scroll (a classic scrollbar draws a horizontal one), so
   its padding holds everything that reaches past a link's words: the hit area (a label's padding, .8em
   either side, base.css) and the focus outline. The negative margins give that room back, so the words
   stay where they were (.4em in from the box's left edge, flush with its right) and so does the corner's
   box. Up and down a link reaches little past its line: the .4em holds it.
   The column starts 1em under MENU, not less: the first link, the current page's, holds an ink wash (veil.js, spec 3.4) whose ragged
   rim reaches up to 1.4 times the link's box, which at 14px labels would have lightened MENU's words under 4.5:1 in Ink. */
.js .menu__list {
  --reach: calc(.8 * var(--label-size) + var(--outline-width) + var(--outline-offset));
  max-height: calc(89vh - 6em);
  max-height: calc(89dvh - 6em);
  overflow-y: auto;
  margin: 1em calc(-1 * var(--reach)) 0 calc(.4em - var(--reach));
  padding: .4em var(--reach);
}

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

/* From 64rem up the open menu is a column in the page's right-hand margin, clear of the content (base.css,
   --corner-reach). Below that it is a sheet (further down). Either way it fades in and out as one piece over .7s, as Come in
   fades: its opacity is --sheet, the one value shell.js advances once per drawn frame (the sheet's block below says why, and why
   it is .01 and not 0 at --sheet 0). Only the menu in the corner has a driver; a menu shown inside the page (the catalog's
   samples) is shown as it is. */
.js .shell-corner .menu__list {
  opacity: max(.01, var(--sheet));
}

/* MENU says shut while the menu is still fading out: it takes no pointer then, so a click or a tap belongs to the page behind it, which is not
   inert any more. Only with the script (.js): without it (no JavaScript, shell.js failing to load or throwing, which take .js away) the toggle is
   still marked shut in the markup and the list is the links on the page, which must take taps. */
.js .menu__toggle[aria-expanded="false"] + .menu__list {
  pointer-events: none;
}

/* Below 64rem the open menu is a sheet over the page, as on earendil.com's phone menu (spec 4.4). Its surface, the page's ground
   (paper with the still grain at the page's own size), is masked to fade across the left half: nothing at the left edge, solid from
   the middle on, so the scene shows on the left and the right-aligned links, which start well right of the middle, lie on a solid
   sheet. The surface is the sheet's ::before, in base.css beside the grain it draws (a url() in a custom property is resolved from
   the stylesheet that uses it). The links and MENU are not masked, only the surface. The page behind is inert and does not scroll
   while the sheet is open.
   That surface is the sheet wherever the cloth is not drawing. While it is, the cloth draws the sheet itself, paper and film grain under
   the ink washes (veil.js, u_sheet), and the surface is not drawn: base.css, at the end, masks <main> out of the right half and fades the
   display control with it. This file keeps the links' own fade. */
@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 corners like the rest of the page. */
  .shell-corner .menu__toggle {
    position: relative;
    z-index: 5;
  }

  /* The corner that holds the sheet stays above the others, so they do not show through it, as it fades out too: the bottom corners
     wait at the end of the page as flex items of the footer, at the same level and later in the document. While the menu is
     shut the corner holds nothing but MENU. */
  .shell-corner--top-right {
    z-index: 6;
  }

  /* The sheet is laid out from the moment it is shown to the moment it is gone, so it fades out where it was. */
  .js .menu__list {
    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;
    overscroll-behavior: contain;
    gap: 1.6em;
  }

  /* WebKit fires no click for a tap on an element it does not take for clickable, so a tap on the open sheet's own surface, which
     closes the menu (shell.js), would do nothing. iOS Safari takes a pointer cursor for clickable; Playwright's WebKit does not, and
     wants a click listener on the sheet itself, which shell.js has as well. The links already are clickable. The browser's highlight of the tapped
     element would wash the whole sheet for it, so it is off (base.css, `html`). */
  .js .menu__list.is-open {
    cursor: pointer;
  }

  /* The sheet's fade is not CSS's: it is one value, --sheet (0 shut, 1 open), that shell.js advances once per drawn frame, by that
     frame's share of the fade (.7s in and .7s out, ease, as Come in fades) and never by more than a quarter of it, and writes on the
     sheet, its groups of links, <main> and the corners (it does not inherit: base.css says why). The links (the sheet's opacity, further up, and
     its groups' move, here), the paper the cloth draws (veil.js) and the page's fade-out under the right half (base.css) all read that one value,
     so they fade together.
     Nothing here is a transition, an animation or a keyframe, on purpose: those are functions of time, and a frame that comes late (WebKit's
     first frame of a full-screen sheet on a phone, a slow runner, a phone drawing the cloth) can find one over between two frames drawn, so the
     sheet blinks. CI's frames showed it: 250 ms a frame, and every CSS fade, with or without will-change, a layer of its own, no mask, no grain,
     no scroll lock, was a blink from .01 to .99 in one frame; a fade stepped from script by at most a quarter per frame never was.
     The sheet is displayed (is-open) from the click until the value is back at 0, so it fades out where it was and no timer ends the close.
     It is never at opacity 0 while displayed: the opacity is .01 at --sheet 0, because WebKit does not paint a layer at opacity 0, so the sheet's
     first full-screen paint (grain, mask) would wait for the first frame in which it is above 0 and that frame is slow (measured in
     Playwright's WebKit: a layer at 0 is not painted, one at 1e-5 is painted with the frame that displays it; .01 is far from that edge and
     under three levels of an 8-bit channel, which no eye sees, for the one frame it lasts). The groups of links make the move, 6px down into
     place, and the sheet itself has no transform: a transform on the sheet would make it the containing block of its position: fixed surface
     (base.css), and a sheet scrolled when it closes (a phone turned sideways, where the links reach past the bottom) would carry the surface
     away with the links for the whole fade (sheet_scrolled_close_problems). Only the sheet in the corner has a driver; a menu shown inside the
     page (the catalog's samples) is shown as it is. Motion off, and a system asking for reduced motion with nothing saved, take the value to its
     end at once (shell.js), as does a change that cross-fades (a link in the page, Back or Forward); a link chosen from the sheet closes it by the
     driver like any close, and the old content fades out with it. The column from 64rem up fades by the same value and does not move. */
  .js .shell-corner .menu__group {
    transform: translateY(calc((1 - var(--sheet)) * -6px));
  }

  /* The page does not scroll while the sheet is open (the wheel, touch, keys). */
  html:has(.menu__list.is-open) {
    overflow: hidden;
  }
}