/* photo-markup.css — canonical styling for the photo markup editor.
 *
 * Extracted 2026-07-29 VERBATIM from the Peak CRM (Job List/css/styles.css,
 * the .photos-ed* block) so the CRM and SparkSheet look identical. The CRM
 * still carries its own copy inline; see ADOPTION.md for switching it over.
 *
 * Deliberately hard-coded colours, not theme variables. This bar sits over a
 * photograph in both products, and a photo is not theme-aware: a dark-mode bar
 * on a dark photo disappears. The CRM's original made the same call.
 *
 * .photos-ed is position:absolute/inset:0, so whatever hosts it MUST be
 * position:relative (or another containing block) with a real height.
 */
.photos-ed { position: absolute; inset: 0; z-index: 5; display: flex; flex-direction: column; }
.photos-ed-bar {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  padding: 8px 12px; background: #fff; box-shadow: 0 2px 14px rgba(0,0,0,.35);
}
.photos-ed-group { display: flex; gap: 4px; align-items: center; }
.photos-ed-btn {
  border: 1px solid #d5dbe3; background: #fff; color: #1c2b3a; border-radius: 8px;
  padding: 5px 10px; font: inherit; font-size: 13px; cursor: pointer;
}
.photos-ed-btn:hover { border-color: #8fa3b8; }
.photos-ed-btn.is-on { background: #1E88E5; border-color: #1E88E5; color: #fff; }
.photos-ed-save { background: #43A047; border-color: #43A047; color: #fff; font-weight: 600; }
.photos-ed-save:hover { border-color: #2e7d32; }
.photos-ed-swatch {
  width: 22px; height: 22px; border-radius: 50%; border: 2px solid #d5dbe3; cursor: pointer; padding: 0;
}
.photos-ed-swatch.is-on { border-color: #1c2b3a; transform: scale(1.15); }
.photos-ed-canvaswrap {
  flex: 1; display: flex; align-items: center; justify-content: center;
  overflow: hidden; padding: 10px;
}
.photos-ed-canvas {
  max-width: 100%; max-height: 100%; border-radius: 6px;
  cursor: crosshair; touch-action: none;
  box-shadow: 0 8px 40px rgba(0,0,0,.5);
}