/**
 * The stage builder's chrome — and only its chrome.
 *
 * Everything inside the grid is drawn by `world.css`, because the builder
 * paints with the game's own renderer. Nothing here may restyle a tile: if a
 * plot looks wrong in the builder it is wrong in the game too, and that is
 * the property worth protecting.
 */

/* The plot takes the room, and everything else is one panel beside it.

   It was three columns -- stages, plot, tools -- and a plot is a fixed number
   of pixels wide, so a large one simply grew past its column and printed
   itself over the panel on the right. Two columns give it far more to work
   with; when it still does not fit, the plot scrolls INSIDE its own column
   rather than pushing the layout about. */
.workshop {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 17rem;
  gap: var(--gap-5);
  align-items: start;
  padding: var(--gap-5) 0;
}

@media (max-width: 60rem) {
  .workshop { grid-template-columns: minmax(0, 1fr); }
}

/* -- the stage list ------------------------------------------------------ */

.rack {
  display: grid;
  gap: var(--gap-3);
  align-content: start;
}

.rack__title,
.field__label {
  font-family: var(--font-pixel);
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0;
}

.rack__note {
  margin: -2px 0 0;
  font-size: .72rem;
  line-height: 1.4;
  color: var(--ink-soft);
}

/* One row: the thing you do often gets the words, the two you rarely do get
   an icon each. */
.rack__actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: var(--gap-2);
}

/* Armed, waiting for the second click that means it. */
.btn--icon[data-armed="true"] {
  color: var(--parchment);
  background: var(--berry);
  box-shadow: inset 0 0 0 2px var(--berry-deep), 0 var(--lift) 0 var(--berry-deep);
}

/* -- the stage picker ----------------------------------------------------
   Arrows either side, because stepping one along should not need the list
   opened. Built like the plot picker in the game's header: heavy inner
   outline, lit top edge, solid lip underneath, no blur anywhere.
   ---------------------------------------------------------------------- */

.stagepick {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--gap-2);
  align-items: stretch;
}

.stagepick__step {
  width: 1.9rem;
  border-radius: var(--radius-sm);
  font-family: var(--font-pixel);
  font-size: 1.05rem;
  line-height: 1;
  color: var(--parchment);
  background: linear-gradient(180deg, var(--wood-lit), var(--wood));
  box-shadow: inset 0 0 0 2px var(--wood-deep), 0 3px 0 var(--wood-deep);
  transition: transform 90ms var(--ease-out), box-shadow 90ms var(--ease-out), filter 120ms;
}

.stagepick__step:hover:not(:disabled) { filter: brightness(1.09); }

.stagepick__step:active:not(:disabled) {
  transform: translateY(3px);
  box-shadow: inset 0 0 0 2px var(--wood-deep), 0 0 0 var(--wood-deep);
}

.stagepick__step:disabled { filter: grayscale(.5) brightness(.92); opacity: .6; }

/* The caret is drawn on the wrapper, because a <select> cannot have one. */
.stagepick__field { position: relative; display: block; }

.stagepick__field::after {
  content: "";
  position: absolute;
  right: 11px;
  top: 50%;
  translate: 0 -2px;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid var(--wood-deep);
  pointer-events: none;
}

.stagepick__select {
  width: 100%;
  height: 100%;
  padding: var(--gap-2) 26px var(--gap-2) var(--gap-3);
  /* The chrome is the pixel-art part. The option text stays in the body face:
     a pixel font at this size makes a long line of stage names harder to
     read, and a native dropdown ignores the font on some platforms anyway,
     so it would only ever be half applied. */
  font-family: var(--font-body);
  font-size: .88rem;
  color: var(--ink);
  appearance: none;
  border: 0;
  border-radius: var(--radius-sm);
  background: linear-gradient(180deg, var(--parchment), var(--page));
  box-shadow:
    inset 0 0 0 2px var(--wood-deep),
    inset 0 2px 0 rgba(255, 255, 255, .5),
    0 3px 0 var(--wood-deep);
}

.stagepick__select:focus-visible {
  outline: 0;
  box-shadow:
    inset 0 0 0 2px var(--gold-deep),
    inset 0 2px 0 rgba(255, 255, 255, .5),
    0 3px 0 var(--gold-deep);
}

.stagepick__select:disabled { filter: grayscale(.5); opacity: .6; }

/* -- the plot ------------------------------------------------------------ */

.easel {
  display: grid;
  gap: var(--gap-3);
  justify-items: safe center;
  min-width: 0;
}

.easel__plot {
  /* Overwritten from the map on every repaint; these are only so the box has
     a shape before the first one. */
  --cols: 8;
  --rows: 8;
  /* The same tile as the game, at the same size. It used to be scaled to fit
     the space, which meant a 3x5 stage was drawn with enormous tiles and a
     20x20 one with tiny ones — so the builder was never showing you what you
     were actually making. */
  position: relative;
  aspect-ratio: var(--cols) / var(--rows);
  width: calc(var(--tile-size) * var(--cols));
  border-radius: var(--radius-sm);
  box-shadow: 0 0 0 1px var(--page-line);
  /* Painting is a drag, and a drag over a grid of divs will otherwise select
     the page instead of drawing on it. */
  user-select: none;
  touch-action: none;
  /* The cursor is replaced by the brush itself, so hide the real one. */
  cursor: none;
}

/* The brush, snapped to the cell it would land in. Ringed in gold so it never
   reads as a tile that is already there. */
.ghost {
  position: absolute;
  left: 0;
  top: 0;
  width: calc(100% / var(--cols));
  height: calc(100% / var(--rows));
  translate: calc(var(--gx, 0) * 100%) calc(var(--gy, 0) * 100%);
  z-index: 2;
  opacity: .88;
  pointer-events: none;
  box-shadow: 0 0 0 2px var(--gold), 0 0 0 4px rgba(0, 0, 0, .38);
}

.ghost[hidden] { display: none; }

.ghost__tile { position: absolute; inset: 0; }

.easel__verdict {
  margin: 0;
  font-size: .85rem;
  text-align: center;
}

/* The same two colours the game uses to say won and lost, because they mean
   the same two things here. */
.easel__verdict[data-tone="ok"] { color: var(--gold-deep); }
.easel__verdict[data-tone="wrong"] { color: var(--berry-deep); }

/* Nothing to edit. The picker and the buttons stay put, because they are the
   two ways out of it. */
.easel__none {
  display: none;
  margin: 0;
  padding: var(--gap-6) var(--gap-4);
  max-width: 24rem;
  text-align: center;
  color: var(--ink-soft);
}

.workshop[data-empty="true"] .easel__none { display: block; }

.workshop[data-empty="true"] .easel__plot,
.workshop[data-empty="true"] .easel__verdict,
.workshop[data-empty="true"] .tools { display: none; }

/* -- the tools ----------------------------------------------------------- */

.tools {
  display: grid;
  gap: var(--gap-3);
  align-content: start;
  /* Stays put while a tall plot scrolls past it, and has NO scrollbar of its
     own: the browser's is the only one on the page. That is only honest if
     the panel actually fits a screen, which is why the palette is tight and
     the export is folded away — a sticky panel taller than the window has a
     bottom you cannot reach. */
  position: sticky;
  top: calc(var(--gap-4) + 4.5rem);
}

/* The stages, and then the tools, in one panel. */
.tools__group {
  display: grid;
  gap: var(--gap-2);
  padding-bottom: var(--gap-4);
  border-bottom: 1px solid var(--page-line);
}

.field { display: grid; gap: var(--gap-2); }

.field--pair {
  grid-template-columns: 1fr 1fr;
  gap: var(--gap-3);
}

.field__half { display: grid; gap: var(--gap-2); }

.field__input {
  width: 100%;
  padding: var(--gap-2) var(--gap-3);
  font-family: var(--font-body);
  font-size: .9rem;
  color: var(--ink);
  background: var(--page);
  border: 0;
  border-radius: var(--radius-sm);
  box-shadow: inset 0 0 0 1px var(--page-line);
}

.field__input:focus-visible {
  outline: 0;
  box-shadow: inset 0 0 0 2px var(--gold-deep);
}


/* -- the palette --------------------------------------------------------- */

.palette {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
}

.swatch {
  display: grid;
  justify-items: center;
  gap: 4px;
  padding: 5px 2px;
  border-radius: var(--radius-sm);
  background: var(--page);
  box-shadow: inset 0 0 0 1px var(--page-line);
  transition: box-shadow 100ms var(--ease-out);
}

.swatch:hover { box-shadow: inset 0 0 0 1px var(--ink-soft); }
.swatch[data-on="true"] { box-shadow: inset 0 0 0 2px var(--gold-deep); }

/* The face of the button is one real tile at a readable size. The tile sizes
   itself from the grid it sits in, exactly as it does on a plot, which is why
   this is a sized box rather than a picture of one. */
.swatch__tile {
  position: relative;
  width: 1.7rem;
  height: 1.7rem;
}

.swatch__name {
  font-size: .6rem;
  line-height: 1.2;
  color: var(--ink-soft);
  text-align: center;
}