/* Small, Tailwind-independent rules: map canvas, SVG interaction and the embed page. */
.canvas-wrap {
  background-color: #f6f3ef;
  background-image: radial-gradient(rgba(120, 100, 80, .14) 1px, transparent 1px);
  background-size: 18px 18px;
  overflow: hidden;
  touch-action: none;
}
@media (prefers-color-scheme: dark) {
  .canvas-wrap { background-color: #1c1917; background-image: radial-gradient(rgba(255, 255, 255, .07) 1px, transparent 1px); }
}
.canvas-wrap svg { width: 100%; height: 100%; display: block; cursor: pointer; user-select: none; -webkit-user-select: none; }
.canvas-wrap.tool-select svg, .canvas-wrap.placing svg { cursor: crosshair; }
.canvas-wrap.tool-pick svg { cursor: copy; }
.canvas-wrap.panning svg, .canvas-wrap.space svg { cursor: grabbing; }
.canvas-wrap .r { transition: filter .08s; }
.canvas-wrap .r:hover { filter: brightness(.9) saturate(1.1); }
.canvas-wrap .r.hl { stroke: #1c1917; stroke-width: 2; }
.canvas-wrap text.lbl, .canvas-wrap #mb-legend { cursor: move; }
.sb-tab.on { background: #fff0e6; color: #e35f22; }
@media (prefers-color-scheme: dark) { .sb-tab.on { background: rgba(249, 122, 61, .15); color: #ffbd94; } }
.thumb svg, [data-render-key] svg, #palette-preview svg { width: 100%; height: 100%; display: block; }
.viewer-canvas svg { width: 100%; height: auto; max-height: 78vh; display: block; }
dialog[open] { animation: pop .14s ease-out; }
@keyframes pop { from { opacity: 0; transform: translateY(6px) scale(.98); } to { opacity: 1; transform: none; } }
#toast.show { opacity: 1; }

/* embed */
body.embed { margin: 0; background: transparent; font-family: system-ui, sans-serif; }
.embed-canvas { position: fixed; inset: 0 0 22px 0; }
.embed-canvas svg { width: 100%; height: 100%; display: block; }
.embed-credit { position: fixed; left: 0; right: 0; bottom: 0; height: 22px; line-height: 22px; font-size: 11px; text-align: right; padding: 0 8px; color: #78716c; text-decoration: none; }
.embed-credit:hover { color: #e35f22; }