/* ── PixelDev · the Pixel Art toolbar ────────────────────────────────────────
   Loaded after style.css so these win without !important. A separate file
   because style.css comes down from upstream and every edit to it is a
   recurring merge conflict — see pixeltools-ui.js, which does the moving. */

/* The palette was the only thing in the toolbar taller than the buttons: 18px
   squares wrapping into two rows made a 41px block against a 31px tool button,
   and the bar sized itself to that. 14px squares are half of the fix; the other
   half is that there are now ten colours rather than sixteen (format.js).

   max-width is set so all ten colours land on the first line and the
   recent-colours box takes the second on its own — which is the arrangement
   upstream designed it for ("wraps into the empty space after the grey tones"),
   except the empty space is now a whole row rather than the tail of one.

   Two rows at 14px comes to 31.7px against a 31.4px tool button, so the palette
   no longer sets the bar's height. Forcing it onto ONE line instead is worse,
   not better: the recent box grows to ~145px once ten colours have been used,
   and a 316px block pushes the toolbar itself into wrapping — the same extra
   row, moved. Bounded width is what keeps the height fixed. */
#px-swatches { max-width: 172px; align-content: center; }
#px-swatches > .swatch { width: 14px; height: 14px; border-radius: 3px; flex: none; }

/* The recent block shares the palette's second row, so it has to match its
   height or it sets the block's instead. */
#px-recent { min-height: 14px; padding: 0 4px; }
#px-recent .swatch { width: 11px; height: 11px; border-radius: 2px; }
#px-recent .recent-empty { font-size: 9px; }

/* ── the Actions block ───────────────────────────────────────────────────────
   Seven buttons with nothing laying them out: style.css has a rule for the
   two-up `.btn-row` pairs and none at all for `#px-sprite-actions`, so the rest
   were inline-block and simply wrapped when they ran out of room. Each one came
   out the width of its own label, the pairs' labels broke over two lines, and
   the block read as a pile rather than a list.

   One column, one width, one height. The four PNG actions keep their two-up
   pairing — they are two opposed pairs and reading them as a 2×2 is the point —
   and only stop wrapping.

   Every one of these is hidden individually by pixel.js depending on what kind
   of sprite is open (font sprites lose three, built-in effects lose duplicate
   and delete), so this can style no cell by position and assume nothing about
   what is beside it. `flex: 1` on the pairs means a row with one survivor gives
   it the full width rather than leaving a gap where its partner was. */
#px-sprite-actions { display: flex; flex-direction: column; gap: 6px; }
#px-sprite-actions > button { width: 100%; }
#px-sprite-actions button {
  min-height: 30px;
  padding: 5px 8px;
  font-size: 12px;
  white-space: nowrap;      /* "export frame ↓" on one line, not two */
}
/* The paired buttons get the tightest padding of the block, because "import
   frame ↑" is the longest label that has to survive in half a 230px panel and
   it clears the two-up column by about four pixels. */
#px-sprite-actions .btn-row { gap: 6px; }
#px-sprite-actions .btn-row button { padding-left: 5px; padding-right: 5px; }

/* Destructive, and one row below "duplicate sprite" — which is the neighbour
   you least want to hit by accident. Space rather than a rule: the panel is
   already a stack of bordered boxes and another line would just be more edge.
   It stays quiet until you go for it. */
#px-del-sprite { margin-top: 8px; background: transparent; }
#px-del-sprite:hover { background: var(--panel2); border-color: var(--danger); }

/* In the panel it is a row of its own under the fps slider, not a control
   squeezed into a toolbar — so it gets the panel's label treatment. */
#px-onion-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 2px 0 6px;
  font-size: 12px;
  color: var(--dim);
}
#px-onion-row input { margin: 0; }