/* ============================================================
   THE WORLD SWITCHER.

   Its own stylesheet because it is the one control that belongs to no
   page: it appears on the furniture catalogue and on the block study,
   and both of those have their own stylesheet and their own palette. A
   shared control styled inside either one of them is a control that
   renders wrong on the other the first time anything moves.

   It takes its colour from currentColor and its position from the page.
   Everything here is shape and behaviour; the two host pages decide
   where the row sits and what value it is drawn in, because "the quiet
   corner" is in a different place on a canvas you drag than on a fixed
   sheet.
   ============================================================ */

.wd-pager {
  position: fixed; z-index: 20;
  display: flex; align-items: center; gap: 2px;
  /* The row is mostly empty space. On a canvas you drag, an invisible
     40px-tall bar across the corner that eats the drag is a bug you
     would spend an afternoon on — so the row is transparent to the
     pointer and only the two chevrons take it back. */
  pointer-events: none;
}

.wd-step {
  pointer-events: auto;
  /* 38px of hit area around a 14px glyph. The chevron is small because it
     is punctuation around a word rather than a button — but a target the
     size of its own glyph is a target you miss, and on a canvas you are
     already dragging, a miss is a drag. */
  width: 38px; height: 38px;
  display: grid; place-items: center;
  opacity: 0.55;
  transition: opacity var(--fast) var(--ease);
}
.wd-step:hover, .wd-step:focus-visible { opacity: 1; outline: none; }
.wd-chev {
  width: 14px; height: 14px;
  transition: transform var(--fast) var(--ease);
}
/* The second chevron is the first one mirrored — see the note in
   worlds.js on why there is only one glyph. */
.wd-step--next .wd-chev { transform: scaleX(-1); }
/* Each leans the way it points when pressed, which is this site's word
   for a control answering. */
.wd-step:active .wd-chev { transform: translateX(-2px); }
.wd-step--next:active .wd-chev { transform: scaleX(-1) translateX(-2px); }

/* The name of the world you are in. Uppercase mono, like every other
   readout on either canvas. A minimum width so the chevrons do not walk
   in and out as the name changes length between worlds — a control whose
   parts move when you use it reads as the page recovering from
   something. */
.wd-name {
  min-width: 13ch;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  white-space: nowrap;
}