/* A viewport-sized drawing surface beneath every window and link. */
#desktop-canvas {
  position: fixed;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
#desktop-canvas.is-drawing-enabled {
  pointer-events: auto;
  touch-action: none;
  cursor: url("../img/pencil-cursor.svg") 2 21, crosshair;
}
#desktop-canvas[data-tool="eraser"].is-drawing-enabled {
  cursor: url("../img/eraser-cursor.svg") 3 15, crosshair;
}
.paint-ready .desktop,
.paint-ready .desktop-footer {
  position: relative;
  z-index: 1;
}
/* Let the visible wallpaper between windows receive pointer events. */
.paint-ready .desktop,
.paint-ready #main,
.paint-ready .sidebar,
.paint-ready .desktop-icons {
  pointer-events: none;
}
.paint-ready .window,
.paint-ready .desktop-icons a,
.paint-ready .desktop-caption {
  pointer-events: auto;
}
.paint-desktop-only .desktop,
.paint-desktop-only .desktop-footer {
  visibility: hidden;
}
.paint-tools {
  position: fixed;
  z-index: 45;
  right: 16px;
  bottom: 48px;
  width: 276px;
  max-width: calc(100vw - 16px);
  max-height: calc(100dvh - 64px);
  overflow-y: auto;
}
.paint-body {
  padding: 10px;
  font-size: 12px;
}
.paint-enable {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
}
.paint-enable input {
  accent-color: var(--navy);
  margin: 0;
}
.paint-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}
.paint-actions .button {
  padding: 5px 9px;
}
.paint-actions [aria-pressed="true"],
.paint-toggle[aria-expanded="true"] {
  box-shadow: var(--pressed);
}
.paint-actions .button:disabled {
  color: #555;
  cursor: default;
}
.paint-size {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-left: auto;
  font-size: 11px;
}
.paint-size select {
  font: inherit;
  color: #111;
  border: 1px solid #808080;
  border-radius: 0;
  background: #fff;
  padding: 4px 0;
}
.paint-palette {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 3px;
  margin: 10px 0;
}
.paint-swatch {
  min-width: 0;
  height: 29px;
  border: 0;
  padding: 4px;
  box-shadow: var(--raised);
  background: var(--face);
}
.paint-swatch span {
  display: block;
  width: 100%;
  height: 100%;
  border: 1px solid #555;
}
.paint-swatch[aria-pressed="true"] {
  box-shadow: var(--pressed);
  outline: 1px dotted #000;
  outline-offset: 1px;
}
.paint-hint {
  margin: 10px 0 0;
  font-size: 11px;
  color: #444;
}
.paint-announcement {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}
.paint-toggle {
  flex: none;
  min-height: 28px;
  padding: 3px 7px;
}
@media (pointer: coarse) {
  .paint-swatch {
    height: 34px;
  }
  .paint-actions .button {
    min-height: 36px;
  }
}
@media (max-width: 600px) {
  .paint-tools {
    right: 8px;
  }
}
@media print {
  .paint-desktop-only .desktop,
  .paint-desktop-only .desktop-footer {
    visibility: visible;
  }
  #desktop-canvas,
  .paint-tools {
    display: none !important;
  }
}