/* The block editor's furniture. draw.js draws the picture; this file only
   arranges the room around it.
   ---------------------------------------------------------------------------
   TWO WIDTHS, ONE STYLESHEET. The editor is mounted in two places that have
   nothing in common: the account modal, which is about 360px of column, and
   _draw.html, which is a whole desktop page. So the layout is a wrapping flex
   rather than a fixed three-column grid — the canvas takes the width it can
   get, the controls sit beside it when there is room and under it when there
   is not, and neither case needs a media query naming a device.

   NOTHING IN HERE PAINTS THE ARTWORK. The blocks, the grid lattice, the
   backdrop behind the canvas and the ghost under the cursor are all SVG that
   draw.js builds, because they have to render identically in the account
   modal, in the review queue on /admin.html and in a bare Node process that
   has no stylesheet at all. A colour in this file can only ever be furniture.
   The one exception is .dr-ground-*, and it is here rather than there because
   the preview swatches ask for their backdrop by class name — see the comment
   on that block.

   Every class is prefixed dr-, and this file styles nothing else: it is loaded
   into pages that own their own look, and an editor that restyled a <button>
   would redecorate the account dialog around it. */

.dr-root {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: flex-start;
  font: 12px/1.4 var(--font-body, system-ui, sans-serif);
  color: var(--text, #e6e8f0);
  /* The editor takes the keyboard (1-7, R, Q/E, Z, X, M), so it is focusable —
     without a visible ring nobody can tell whether the keys will do anything. */
  outline: none;
}
.dr-root:focus-visible {
  outline: 2px solid var(--accent, #22d3ee);
  outline-offset: 4px;
  border-radius: 12px;
}

/* ------------------------------------------------------------------ canvas */
.dr-stage {
  flex: 1 1 260px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Square, always: the document is 64x64 and a canvas of any other shape would
   show blocks that are not the blocks that get saved. */
.dr-canvas {
  position: relative;
  aspect-ratio: 1 / 1;
  width: 100%;
  border: 1px solid var(--border, rgba(255, 255, 255, 0.08));
  border-radius: 10px;
  overflow: hidden;
  cursor: crosshair;
  /* A drag across the canvas is a brush stroke, not a scroll or a text
     selection — on a phone, without this, the first stroke drags the page. */
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.dr-layer {
  position: absolute;
  inset: 0;
}
.dr-layer svg { display: block; width: 100%; height: 100%; }
/* The ghost is a preview of where the brush will land, so it must never be
   what the pointer hits. */
.dr-ghost { pointer-events: none; }

.dr-erasing .dr-canvas { cursor: cell; }

.dr-status {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  min-height: 16px;
  font-size: 11px;
  color: var(--muted, #8b93b0);
}
/* The note is the editor talking back ("that would be the 401st piece"), so it
   is the half that may not be clipped away when the count is long. */
.dr-note { flex: 1 1 auto; text-align: right; }
.dr-count { flex: 0 0 auto; }

/* ------------------------------------------------------------------ side */
.dr-side {
  flex: 0 1 190px;
  min-width: 168px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.dr-row { display: flex; flex-direction: column; gap: 5px; }
.dr-lab {
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted, #8b93b0);
}
.dr-lab b { color: var(--text, #e6e8f0); font-weight: 400; }

/* --------------------------------------------------------------- brushes */
/* Seven across at full width, wrapping to two rows in a narrow modal. They are
   equal squares whatever the piece: an I is four cells long and an O is two,
   and a palette where the I button is twice the width of the O reads as a
   mistake before it reads as a fact about tetrominoes. */
.dr-pieces {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(38px, 1fr));
  gap: 4px;
}
.dr-piece {
  position: relative;
  aspect-ratio: 1 / 1;
  padding: 5px;
  background: var(--well, #0c0f1e);
  border: 1px solid var(--border, rgba(255, 255, 255, 0.08));
  border-radius: 8px;
  cursor: pointer;
  display: grid;
  place-items: center;
}
.dr-piece:hover { border-color: var(--border-hover, rgba(255, 255, 255, 0.16)); }
.dr-piece[aria-pressed="true"] {
  /* Same reasoning as .dr-btn below: an outline survives a host stylesheet
     that owns every other property of a button. */
  outline: 2px solid var(--accent, #22d3ee);
  outline-offset: -2px;
  border-color: var(--accent, #22d3ee);
}
.dr-thumb { display: block; width: 100%; height: 100%; }
.dr-thumb svg { display: block; }
/* The number key, in the corner. This repo labels its mode keys with their
   numbers for the same reason: a shortcut nobody can see is a shortcut nobody
   uses. */
.dr-key {
  position: absolute;
  top: 2px;
  right: 4px;
  font-size: 9px;
  font-style: normal;
  line-height: 1;
  color: var(--muted, #8b93b0);
  pointer-events: none;
}
.dr-piece[aria-pressed="true"] .dr-key { color: var(--accent, #22d3ee); }

/* ----------------------------------------------------- sizes, inks, tools */
.dr-btns { display: flex; flex-wrap: wrap; gap: 4px; }
.dr-btn {
  flex: 1 1 auto;
  padding: 6px 8px;
  font: inherit;
  font-size: 11px;
  color: var(--text, #e6e8f0);
  background: var(--well, #0c0f1e);
  border: 1px solid var(--border, rgba(255, 255, 255, 0.08));
  border-radius: 7px;
  cursor: pointer;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
.dr-btn b { font-weight: 400; color: var(--muted, #8b93b0); }
.dr-btn:hover { border-color: var(--border-hover, rgba(255, 255, 255, 0.16)); }
/* WHICH ONE IS SELECTED, drawn as an OUTLINE and not as a border or a text
   colour. The editor is mounted inside the account dialog, and the pages it
   lands on style their own <button> — a themed pill with its own border, its
   own background and a hard shadow under it. Against that, recolouring a
   border changes nothing anybody can see, which is exactly what happened: the
   ink and size rows had no visible selection at all inside the modal. An
   outline is the one thing those styles do not set. */
.dr-btn[aria-pressed="true"] {
  outline: 2px solid var(--accent, #22d3ee);
  outline-offset: -2px;
  border-color: var(--accent, #22d3ee);
  color: var(--accent, #22d3ee);
}
.dr-btn[aria-pressed="true"] b { color: inherit; }
.dr-danger:hover { border-color: var(--danger, #ef4444); color: var(--danger, #ef4444); }

/* The three size buttons are one control with three states, so they share a
   row evenly rather than each sizing to its own label. */
.dr-sizes .dr-btn { flex: 1 1 0; }

/* Black and white ink show as what they are. The swatch on the piece button is
   filled by draw.js with the held piece's own colour, so it is never a guess. */
.dr-swatch {
  width: 11px;
  height: 11px;
  border-radius: 3px;
  border: 1px solid var(--border-hover, rgba(255, 255, 255, 0.16));
  background: currentColor;
}
.dr-ink-k .dr-swatch { background: #000; }
.dr-ink-w .dr-swatch { background: #fff; }

/* ---------------------------------------------------------------- previews */
.dr-previews {
  flex: 0 1 auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 150px;
}
.dr-prev-grid { display: flex; flex-direction: column; gap: 6px; }
/* One row per backdrop, and within a row the sizes an avatar is actually seen
   at. They are bottom-aligned so the three sizes read as one object getting
   smaller rather than three objects floating at different heights. */
.dr-prev-row {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--border, rgba(255, 255, 255, 0.08));
}
.dr-prev { flex: 0 0 auto; }
.dr-prev svg { display: block; width: 100%; height: 100%; }

/* The one place a colour here is not furniture. The canvas gets its backdrop
   painted into the SVG, but a preview swatch asks for one by class name, and
   these four have to be the same four draw.js draws — GROUNDS in draw.js is
   the original, this is the copy, and they are checked against each other by
   eye on _draw.html. Field and deck are lifted from the mascot lab's own
   swatches, which is where the two grounds came from in the first place. */
.dr-ground-field { background: linear-gradient(180deg, #5da416, #a8d857); }
.dr-ground-deck { background: linear-gradient(180deg, #3a424b, #171b20); }
.dr-ground-white { background: #fff; }
.dr-ground-black { background: #000; }

/* A backdrop button is a swatch with its own name written on it, so its label
   has to be legible against the swatch and not against the panel: white ink on
   the White button is a button with nothing on it. Contrast is set per ground
   here, and the selected state is a ring rather than a colour change for the
   same reason — recolouring the text of a button whose background is fixed is
   how the label disappeared in the first place. */
.dr-btn.dr-ground { color: #0a0c16; text-shadow: none; }
.dr-btn.dr-ground-deck,
.dr-btn.dr-ground-black { color: #e6e8f0; }
.dr-btn.dr-ground[aria-pressed="true"] {
  color: inherit;
  box-shadow: inset 0 0 0 2px var(--accent, #22d3ee);
  border-color: var(--accent, #22d3ee);
}
.dr-btn.dr-ground-field[aria-pressed="true"],
.dr-btn.dr-ground-white[aria-pressed="true"] { color: #0a0c16; }
.dr-btn.dr-ground-deck[aria-pressed="true"],
.dr-btn.dr-ground-black[aria-pressed="true"] { color: #e6e8f0; }

/* A narrow column — the account modal — stacks everything and drops the
   previews to a single row, because three stacked preview rows below a canvas
   push the Save button off a phone screen. */
@media (max-width: 520px) {
  .dr-root { gap: 10px; }
  .dr-side { flex: 1 1 100%; }
  .dr-previews { flex: 1 1 100%; }
  .dr-prev-grid { flex-direction: row; flex-wrap: wrap; }
  .dr-prev-row { flex: 1 1 auto; }
}

/* ------------------------------------------------------- theme, then colour */
/* The palette picker: a theme in the label's own select, and that theme's
   colours as a row of chips under it. Eighty-one swatches at once is a wall,
   so the theme is chosen first and only its own colours are shown. */
.dr-theme {
  font: inherit;
  font-size: 10px;
  letter-spacing: normal;
  text-transform: none;
  color: var(--text, #e6e8f0);
  background: var(--well, #0c0f1e);
  border: 1px solid var(--border, rgba(255, 255, 255, 0.08));
  border-radius: 6px;
  padding: 1px 4px;
  max-width: 110px;
  cursor: pointer;
}
.dr-theme:disabled { opacity: 0.6; cursor: default; }

.dr-swatches {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(22px, 1fr));
  gap: 4px;
}
/* A chip is its colour and nothing else — no label, no border of its own that
   would tint what it is showing. The selected one is called out with an
   outline, which is the same trick the rest of this file uses and for the same
   reason: the host page owns <button> and an outline is what survives it. */
/* The selector is over-specific on purpose. A chip is a sample of a BLOCK, and
   the pages this mounts on style their <button> as a pill — inside the account
   dialog that turned every chip into a circle, which is a sample of nothing
   this editor can draw. `.dr-root .dr-swatches` outranks a themed `.modal
   button` without reaching for !important. */
.dr-root .dr-swatches .dr-chip {
  aspect-ratio: 1 / 1;
  min-height: 22px;
  padding: 0;
  border: 1px solid rgba(0, 0, 0, 0.35);
  /* The same 16% of the block that draw.js rounds a real block by. */
  border-radius: 4px;
  cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}
.dr-root .dr-swatches .dr-chip[aria-pressed="true"] {
  outline: 2px solid var(--accent, #22d3ee);
  outline-offset: 1px;
}