/* tool_strip.js, toggle_group.js, point_picker.js: looks, with the page's
   variables and plain fallbacks. */
.tool-strip { display: flex; flex-wrap: wrap; gap: .3rem; }
.tool-strip-tool { min-height: 40px; padding: 0 .7rem; border: 1px solid var(--border, #bbb);
  border-radius: 999px; background: var(--surface, #fff); color: inherit; font: inherit; cursor: pointer; }
.tool-strip-tool[aria-selected="true"] { background: var(--accent, #3b6ea5); border-color: var(--accent, #3b6ea5);
  color: #fff; }
.tool-strip-tool[hidden] { display: none; }
.toggle-group { display: inline-flex; flex-wrap: wrap; gap: .25rem; }
.toggle-group-btn { min-height: 40px; min-width: 44px; padding: 0 .6rem; border: 1px solid var(--border, #bbb);
  border-radius: 6px; background: var(--surface, #fff); color: inherit; font: inherit; cursor: pointer; }
.toggle-group-btn[aria-pressed="true"] { background: var(--accent-soft, #dbe8ff); border-color: var(--accent, #3b6ea5);
  color: var(--accent, #3b6ea5); }
.toggle-group-btn:disabled { opacity: .45; cursor: default; }
.point-picker { position: relative; overflow: hidden; border-radius: 8px; max-width: 100%;
  background: #222; cursor: crosshair; touch-action: none; user-select: none; }
.point-picker img { position: absolute; display: block; max-width: none; pointer-events: none; }
.point-picker-point { position: absolute; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%;
  background: var(--accent, #3b6ea5); border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.4); }
.point-picker-ring { position: absolute; transform: translate(-50%, -50%); border-radius: 50%;
  border: 2px dashed #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.4), inset 0 0 0 1px rgba(0,0,0,.4); pointer-events: none; }