/* Wall art tiles (wall-art.html): only what style.css and art.css don't have already. */
.wall-tool .size-presets { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.wall-tool .size-btn { border: 1px solid var(--line); background: #fff; border-radius: 10px; padding: 8px 12px; font: inherit; font-weight: 700; font-size: .9rem; color: var(--ink); cursor: pointer; }
.wall-tool .size-btn:hover { border-color: var(--accent); }
.wall-tool .size-btn[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-hover); }
.wall-tool .size-btn small { font-weight: 600; color: var(--muted); margin-left: 3px; }
.wall-hint { margin: 8px 0 14px; }
.wall-check { margin: 14px 0 10px; }
.wall-tool .color-rows { margin: 0 0 4px; }
.wall-note { margin: 0 0 12px; opacity: .85; }
.wall-note:empty { display: none; }

/* the planner: every place a tile can go; the ones on the wall are filled and numbered */
.wall-plan { display: block; width: 100%; max-height: 320px; margin: 4px 0 10px; touch-action: manipulation; user-select: none; -webkit-user-select: none; }
.wall-plan polygon { fill: #fff; stroke: var(--line); stroke-width: 1.5; stroke-dasharray: 5 4; cursor: pointer; transition: fill .12s; }
.wall-plan polygon:hover { fill: var(--accent-soft); }
.wall-plan polygon.on { fill: var(--accent); stroke: var(--accent); stroke-dasharray: none; }
.wall-plan polygon.on:hover { fill: var(--accent-hover); }
.wall-plan text { font: 800 34px/1 Manrope, system-ui, sans-serif; fill: #fff; pointer-events: none; }
.wall-plan .drop { pointer-events: none; }
.wall-plan .drop circle { fill: #ffb020; stroke: none; }
.wall-plan .drop .ring { fill: none; stroke: #ffb020; stroke-width: 2.5; opacity: .75; }
.wall-plan.drops { cursor: crosshair; }
.wall-plan.drops polygon { cursor: crosshair; }
.wall-plan.drops polygon:not(.on) { visibility: hidden; }
.wall-plan.drops polygon.on:hover { fill: var(--accent); }
.wall-plan.drops .drop { pointer-events: auto; cursor: pointer; }
.wall-plan .drop .hit { fill: transparent; }
.wall-plan.drops .drop .hit { pointer-events: all; }
.wall-plan:not(.drops) .drop { opacity: .55; }