/* The server icon maker (/tools/server-icon): the icon big on a
   checkerboard, where a picture is dragged into place, at real size, and in
   the server list. */

.icon-preview-body { display: grid; grid-template-columns: 288px minmax(0, 1fr); gap: 20px; align-items: start; }
.icon-stage { position: relative; display: grid; place-items: center; width: 288px; height: 288px; border-radius: 14px; background: repeating-conic-gradient(#e9e9e2 0 25%, #f8f8f4 0 50%) 0 0 / 16px 16px; box-shadow: inset 0 0 0 1px var(--twine); }
.icon-big { width: 256px; height: 256px; image-rendering: pixelated; border-radius: 2px; }
.icon-tool.is-picture .icon-big { touch-action: none; }
.icon-big:focus-visible { outline: 3px solid var(--ring); outline-offset: 4px; }
.icon-tool.is-picture .icon-big { cursor: grab; }
.icon-tool.is-picture .icon-big.is-dragging { cursor: grabbing; }
.icon-empty { position: absolute; inset: auto 16px 16px; margin: 0; padding: 8px 12px; border-radius: 10px; background: rgb(255 255 255 / 0.92); color: var(--sage); font-size: 13.5px; font-weight: 600; text-align: center; pointer-events: none; }
.icon-side { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.icon-real { display: flex; align-items: center; gap: 14px; }
.icon-real canvas { flex: none; width: 64px; height: 64px; image-rendering: pixelated; background: repeating-conic-gradient(#e9e9e2 0 25%, #f8f8f4 0 50%) 0 0 / 8px 8px; box-shadow: 0 0 0 1px var(--twine); }
.icon-real .tool-hint strong { color: var(--ink); }
.icon-text { font-family: var(--mono); font-size: 18px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.icon-shuffle { flex: none; }
.icon-shuffle[hidden] { display: none; }
/* Shown smaller than its 64 pixels, the icon is smoothed: pixelated
   shrinking drops whole rows of its pixels. */
.icon-dock { flex: none; width: 44px; height: 44px; image-rendering: auto; border-radius: 4px; box-shadow: 0 0 0 1px var(--twine); }
.tool-hero code { padding: 1px 6px; border-radius: 6px; background: var(--white); color: var(--ink); font-size: 0.86em; box-shadow: inset 0 0 0 1px var(--twine); }

@media (max-width: 1100px) and (min-width: 961px) {
  .icon-preview-body { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .icon-side { width: 100%; }
}
@media (max-width: 960px) {
  .tool-grid-preview-first .tool-preview { order: -1; }
}
@media (max-width: 639.98px) {
  .icon-preview-body { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .icon-stage { width: 100%; height: auto; aspect-ratio: 1; max-width: 320px; margin: 0 auto; }
  .icon-big { width: calc(100% - 32px); height: auto; aspect-ratio: 1; }
  .icon-real canvas { width: 48px; height: 48px; image-rendering: auto; }
  .icon-tool .mc-list-icon { image-rendering: auto; }
}