/* tool_pixelart.css: picture to blocks (/tools/pixel-art), lane PIXELART.
   Tokens and atoms only (theme.css, docs/LOOK.md): the card, .btn, fieldset and table.data come from the theme;
   this sheet only lays them out. Swatch colours are the game's map colours, set inline from the page data. */

.k-tool .pa-tool { --pa-grid: var(--c-text-shadow); }
.k-tool .pa-drop { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); padding: var(--sp-3); border: 2px dashed var(--c-line); cursor: pointer; }
.k-tool .pa-drop.is-over, .k-tool .pa-drop:hover { background: var(--c-hl); }
.k-tool .pa-drop:focus-within { outline: 2px solid var(--c-focus); outline-offset: 2px; }
.k-tool .pa-name { color: var(--fg-soft); overflow-wrap: anywhere; }
.k-tool .pa-file { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; opacity: 0; }
.k-tool .pa-private { color: var(--fg-soft); margin: var(--sp-2) 0 var(--sp-3); }

.k-tool .pa-set { min-width: 0; border: 1px solid var(--c-line); margin: 0 0 var(--sp-3); padding: var(--sp-2) var(--sp-3); display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); align-items: center; }
.k-tool .pa-set legend { color: var(--fg-soft); padding: 0 var(--sp-1); }
.k-tool .pa-set label { display: inline-flex; align-items: center; gap: var(--sp-2); min-height: var(--tap); max-width: 100%; }
.k-tool .pa-set input[type="number"] { width: 6.5rem; min-height: var(--tap); box-sizing: border-box; }
.k-tool .pa-set input[type="radio"], .k-tool .pa-set input[type="checkbox"] { width: 1.25rem; height: 1.25rem; flex: none; }
.k-tool .pa-stage { flex-wrap: wrap; }
.k-tool .pa-stage select { max-width: 100%; min-width: 0; min-height: var(--tap); }

.k-tool .pa-zoom { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); margin: 0 0 var(--sp-2); }
.k-tool .pa-zoom .btn { min-width: var(--tap); justify-content: center; }
.k-tool .pa-zoomval { color: var(--fg-soft); }
.k-tool .pa-view { overflow: auto; max-height: 80vh; background: var(--c-surface); border: 1px solid var(--c-line); padding: var(--sp-2); }
.k-tool .pa-view canvas { display: block; image-rendering: pixelated; }
.k-tool .pa-view canvas[hidden] { display: none; }
.k-tool .pa-empty { margin: 0; color: var(--fg-soft); }

.k-tool .pa-sum { color: var(--fg-soft); }
.k-tool .pa-mat td { vertical-align: middle; }
.k-tool .pa-sws { display: block; }
.k-tool .pa-kind { display: block; color: var(--fg-soft); font: var(--fs-s)/var(--lh-s) var(--font-small); }
.k-tool .pa-sw { display: inline-block; width: 1rem; height: 1rem; margin-right: 2px; border: 1px solid var(--c-text-shadow); vertical-align: middle; }
.k-tool .pa-links { display: flex; flex-wrap: wrap; gap: 0 var(--sp-4); font: var(--fs-s)/var(--lh-s) var(--font-small); }
.k-tool .pa-links a { white-space: nowrap; }
.k-tool .pa-mat td.num { vertical-align: top; }
.k-tool .pa-note { color: var(--fg-soft); font: var(--fs-s)/var(--lh-s) var(--font-small); }