/* Feature 13 (2026-10-02): paint panel cleanup and column alignment. Owner: paint helper. */

/* Founder (D-2026-10-02, paint panel review): "everything aligned
   vertically on the left and right" -- the eyedropper (row 1), the white
   swatch (row 2) and the round paint icon (row 3) share one left edge; the
   close X (row 1), the lock "+8" tile (row 2) and Place (row 3) share one
   right edge. The blue brush icon was removed in index.html so the
   eyedropper is already row 1's first (leftmost) item -- no CSS needed for
   that part.

   LEFT EDGE: row 1 (.pc-sheet-top) and row 2 (.pc-pal-row) already start
   flush at the panel's own left padding edge (no extra margin on their
   first child). Row 3's round icon is style.css's #paint-mode-btn
   ::before pseudo-element, offset by the button's own 6px left padding
   (both the desktop and the <=600px rule use "padding: 0 0 0 6px") --
   zero that so the icon starts at the same edge. One unconditional rule
   covers both sizes: it is later in the cascade than both prior rules
   (same selector/specificity), so it wins at every width. */
#pc-bottom-dock.pc-paint-mode #paint-mode-btn { padding-left: 0; }

/* RIGHT EDGE: row 1's close X and row 3's Place button already sit flush
   against the panel's right padding edge (.pc-grow / margin-left:auto).
   Row 2's lock tile did not, because .pc-pal-row is flex-wrap with no
   stretch -- the 17 fixed-size tiles (16 colours + lock) are narrower than
   the row, so the row just left-packs and the lock tile stops short of the
   edge. margin-left:auto on the lock tile consumes the remainder of ITS
   OWN flex line, pushing it flush right, whether it shares the last line
   with other swatches (desktop, one line) or sits alone on a wrapped last
   line (phone, 16 swatches exactly fill two full 8-per-line rows). This
   "stretches" only the one gap before the lock tile -- every swatch stays
   square, same size, same 7px gap to its neighbours. */
#pc-bottom-dock .pc-pal-row > .pc-lock-tile { margin-left: auto; }

/* F14 (2026-10-02): style.css's own <=600px rule (line 1673,
   "#pc-bottom-dock.pc-paint-mode .pc-sheet-top { display: none; }") hides
   the ENTIRE top tool row -- eyedropper, Clear, Eraser, the X -- on every
   phone-sized viewport, making all three paint-sheet tools unreachable
   there. style.css is out of this file's edit scope; this file loads AFTER
   it (index.html <link> order), so a same-specificity rule here wins at
   every width and simply restores the desktop declaration (style.css line
   1433) inside the same breakpoint. */
@media (max-width: 600px) {
  #pc-bottom-dock.pc-paint-mode .pc-sheet-top { display: flex; align-items: center; gap: 10px; margin-bottom: 13px; }
}

/* F14 fix (2026-10-02): an ARMED tap tool (eraser, eyedropper) must look
   on. Before this the .active class changed nothing, so the founder could
   not see the eraser was still on. Same look as .pc-tool-on.
   Rollback: delete this rule. */
#pc-bottom-dock .pc-tool.active { background: var(--v-acc); color: var(--v-accink); }

/* F17 (2026-10-02, founder, from Wplace): locked colours sit IN the palette
   row, next to the free colour they look like (app.js sets each button's
   `order`), shown only while the lock tile is on. Full colour with a small
   lock badge in the corner, like Wplace. The panel below now opens only for
   the Buy row of a picked locked colour. */
#pc-bottom-dock #palette-locked { display: contents; }
#pc-bottom-dock .pc-pal-row:not(.pc-show-locked) #palette-locked button { display: none; }
#pc-bottom-dock .pc-pal-row > .pc-lock-tile { order: 100000; }
#pc-bottom-dock #palette-locked button.locked-swatch {
  filter: none; position: relative;
  /* Diagonal stripes = "paid colour". White + dark lines read on light and dark swatches. */
  background-image: repeating-linear-gradient(135deg,
    rgba(255,255,255,.6) 0 2px, rgba(0,0,0,.35) 2px 3.5px, transparent 3.5px 9px) !important;
  /* !important: palette-ui.js writes an inline background shorthand. */
}
#pc-bottom-dock #palette-locked button.locked-swatch::after {
  inset: auto -4px -4px auto; width: 18px; height: 18px; margin: 0; border-radius: 5px;
  box-shadow: 0 0 0 1.5px #fff;
  background-color: #11131a;
  -webkit-mask-image: none; mask-image: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white' shape-rendering='crispEdges'%3E%3Cpath d='M7 10h10v8H7zM9 6h2v4H9zm4 0h2v4h-2zm-2-2h2v2h-2z'/%3E%3C/svg%3E");
  background-size: 15px 15px; background-repeat: no-repeat; background-position: center;
}
#pc-bottom-dock .pc-locked-panel:not(:has(> .pc-unlock-row:not([hidden]))) { display: none; }

/* F17: the map cursor shows the armed tool (ui.js syncToolCursor sets
   body[data-pc-tool]). Hotspot = the tool's tip. A drag still shows the
   grabbing hand. */
body[data-pc-tool="pen"] .maplibregl-canvas-container.maplibregl-interactive:not(:active),
body[data-pc-tool="pen"] .maplibregl-canvas-container.maplibregl-interactive:not(:active) canvas {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Cg stroke='%23000' stroke-width='1.5' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M14.5 13.5L24 4a1.8 1.8 0 0 1 2.5 2.5L17 16z' fill='%23c98a4b'/%3E%3Cpath d='M11.5 13l4 4-2 2-4-4z' fill='%23c9ccd3'/%3E%3Cpath d='M9.5 15l4 4c-1 3.5-4.5 6-9.5 6 0-5 2.5-8.5 5.5-10z' fill='%232f6bff'/%3E%3C/g%3E%3C/svg%3E") 4 25, crosshair;
}
body[data-pc-tool="eraser"] .maplibregl-canvas-container.maplibregl-interactive:not(:active),
body[data-pc-tool="eraser"] .maplibregl-canvas-container.maplibregl-interactive:not(:active) canvas {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Cg transform='rotate%28-40 14 14%29' stroke='%23000' stroke-width='1.5' stroke-linejoin='round'%3E%3Crect x='4' y='9' width='20' height='10' rx='2.5' fill='%23f48fb1'/%3E%3Cpath d='M6.5 9H11v10H6.5A2.5 2.5 0 0 1 4 16.5v-5A2.5 2.5 0 0 1 6.5 9z' fill='%23fff'/%3E%3C/g%3E%3C/svg%3E") 5 22, cell;
}
body[data-pc-tool="picker"] .maplibregl-canvas-container.maplibregl-interactive:not(:active),
body[data-pc-tool="picker"] .maplibregl-canvas-container.maplibregl-interactive:not(:active) canvas {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M3 21l1-4 9-9 3 3-9 9z' fill='%23fff' stroke='%23000' stroke-width='1.5' stroke-linejoin='round'/%3E%3Cpath d='M12 6l3-3 6 6-3 3z' fill='%23222' stroke='%23000' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E") 3 21, crosshair;
}