/* ---------------------------------------------------------------------
   PINCEL — draws directly onto the real desktop, on top of bg.png.
   Unlike every other app, this isn't a .window/iframe at all: it's a
   plain overlay living inside #desktop itself (see index.html), toggled
   open/closed by index.html's window-manager script. That's the only
   way for it to actually draw "on" the wallpaper rather than inside a
   panel that's merely styled to look transparent.
   --------------------------------------------------------------------- */

#pincelOverlay{
  position:absolute;
  top:0; left:0; right:0;
  bottom:52px; /* stays clear of the taskbar — same clearance as #desktopIcons */
  z-index:5; /* above the wallpaper/icons, but always below every .window (those start at z-index:10 and only go up) — opening any app still covers the drawing, same as a real wallpaper would be covered */
}
#pincelOverlay.hidden{display:none;}

#pincelCanvas{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  touch-action:none; /* required so drawing on a touchscreen doesn't scroll/zoom the page instead */
  cursor:crosshair;
}

/* ---------- floating toolbar ---------- */
/* Same plain look as the rest of the shell — 1px solid border, translucent
   white panel — so it reads as part of the same system. */
#pincelToolbar{
  position:absolute;
  top:16px;
  left:16px;
  display:flex;
  align-items:center;
  gap:14px;
  padding:10px 14px;
  border:1px solid;
  background:rgba(255,255,255,0.85);
  flex-wrap:wrap;
  max-width:calc(100% - 32px);
}

#pincelSwatches{
  display:flex;
  gap:8px;
}
#pincelSwatches .swatch{
  appearance:none;
  -webkit-appearance:none;
  width:26px;
  height:26px;
  border-radius:50%;
  border:1px solid rgba(0,0,0,0.35);
  background:var(--c);
  cursor:pointer;
  padding:0;
  outline:none;
}
/* The active swatch gets a visible ring rather than just relying on the
   color picker's own value, so it's obvious at a glance which preset
   (if any) is currently selected. */
#pincelSwatches .swatch.active{
  box-shadow:0 0 0 2px #fff, 0 0 0 4px var(--c);
}

#pincelPickerWrap{
  display:flex;
  align-items:center;
  cursor:pointer;
}
#pincelColorPicker{
  width:30px;
  height:30px;
  padding:0;
  border:1px solid;
  background:none;
  cursor:pointer;
}

#pincelSizeWrap{
  display:flex;
  align-items:center;
  gap:8px;
}
#pincelBrushSize{
  width:120px;
}
#pincelSizeReadout{
  min-width:34px;
  text-align:right;
  font:12px sans-serif;
}

#pincelClearBtn{
  appearance:none;
  -webkit-appearance:none;
  cursor:pointer;
  padding:6px 14px;
  border:1px solid;
  background:#fff;
  font:inherit;
}
#pincelClearBtn:active{
  background:#eee;
}

#pincelClearBtn{
  appearance:none;
  -webkit-appearance:none;
  cursor:pointer;
  padding:6px 14px;
  border:1px solid;
  background:#fff;
  font:inherit;
}
#pincelClearBtn:active{
  background:#eee;
}

/* Minimize/close — deliberately styled to match .window-controls in
   shell.css (same padding, min-width, colors) so Pincel's own controls
   read as the same kind of button as every real window's, even though
   this isn't a real .window. */
#pincelWindowControls{
  display:flex;
  gap:6px;
}
#pincelWindowControls button{
  appearance:none;
  -webkit-appearance:none;
  cursor:pointer;
  padding:2px 10px;
  min-width:28px;
  border:1px solid;
  font:inherit;
}
#pincelMinimizeBtn{
  background:#fff;
}
#pincelCloseBtn{
  background:#e33;
  color:#fff;
}

/* Small "_" control, deliberately styled like .win-minimize in shell.css,
   so minimizing Pincel from its own toolbar feels like the same action
   as minimizing any other window — even though this isn't a real window. */
#pincelMinimizeBtn{
  appearance:none;
  -webkit-appearance:none;
  cursor:pointer;
  padding:2px 10px;
  min-width:28px;
  border:1px solid;
  background:#fff;
  font:inherit;
}