/* Decal Studio.

   Almost nothing lives here on purpose. The shell, the rail, the tool panels,
   the floating readout, the buttons and the fields are all the ones the livery
   editor uses, from styles.css, so the two tools are the same tool wearing a
   different subject. What is left below is only what is specific to editing on
   a transparent canvas instead of on a car. */

/* Transparency is drawn by the frame BEHIND the canvas, never into it. The
   exported file is whatever the canvas holds, so the chequerboard cannot leak
   into a customer's decal by construction rather than by remembering to turn
   it off. */
.canvas-frame {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  /* Square, and sized by whichever runs out first: the width of the stage or
     its height. The canvas is centred, so clearing the rail that floats at the
     bottom costs twice the rail's height, not once. */
  width: min(calc(100% - 48px), calc(100dvh - var(--topbar) - 176px));
  aspect-ratio: 1;
  border: 1px solid var(--edge);
  border-radius: var(--r-card);
  overflow: hidden;
  background-color: #202325;
  background-image:
    linear-gradient(45deg, #2a2e31 25%, transparent 25%, transparent 75%, #2a2e31 75%),
    linear-gradient(45deg, #2a2e31 25%, transparent 25%, transparent 75%, #2a2e31 75%);
  background-size: 28px 28px;
  background-position: 0 0, 14px 14px;
}

#decalCanvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  touch-action: none;
}

/* The pointer says what the canvas will do if you press.
   A crosshair everywhere claimed the whole surface was a drawing tool, which
   it only is while the pencil is on. The rest of the time the canvas is either
   empty, in which case an arrow is honest, or it is over something you can
   pick up. */
#decalCanvas { cursor: default; }
#decalCanvas.grabable { cursor: grab; }
#decalCanvas.grabbing { cursor: grabbing; }
#decalCanvas.is-drawing { cursor: crosshair; }

/* `hidden` is only a display:none the browser applies when nothing else sets
   display. `.hud-inline` sets grid, so the colour well kept showing for an
   image, which has no colour of its own. Same trap as the tool panels. */
.hud-inline[hidden] { display: none; }

/* The size picker sits in the topbar beside the one finishing action, so it
   matches the height of the buttons either side of it. */
.export-size { height: 30px; }

/* A full width action inside a panel, the way the livery editor's own reset
   button runs the width of its panel. */
.toolpanel .button.block {
  width: 100%;
  justify-content: center;
}

/* Kinds read at a glance in the element list, the same shape the car's sticker
   list uses for the same job. */
.element-kind {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .08em;
  color: var(--ink-3);
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
  padding: 2px 5px;
}

@media (max-width: 900px) {
  .canvas-frame {
    width: min(calc(100% - 24px), calc(100dvh - var(--topbar) - var(--rail-h, 62px) - 40px));
  }
}

/* The studio's top bar carries two more controls than the editor's: a way back
   to the tools and the export size. On a narrow window those were landing on
   top of undo, redo and the size picker, so they shed their labels in the same
   order a person would give them up. */
@media (max-width: 900px) {
  .topbar-left .button span { display: none; }
  .topbar-left .button { padding: 0 9px; }
}

@media (max-width: 560px) {
  /* Last to go, because the pencil and the shapes make undo worth keeping for
     as long as there is room for it. */
  .topbar-actions #undoBtn,
  .topbar-actions #redoBtn { display: none; }
  .export-size { max-width: 84px; }
}


/* The wordmark is artwork, not type. Height is what matters in a bar; the
   width follows the file's own ratio. */
.brand-logo {
  height: 19px;
  width: auto;
  display: block;
  flex: none;
}