/* ============================================================
   photo-editor.css — Field Portal · markup-editor add-ons
   ------------------------------------------------------------
   The editor's base chrome (.pe-modal / .pe-panel / .pe-toolbar / .pe-tool /
   .pe-mini / .pe-color / .pe-picker / .pe-stage / .pe-actions / .cp) lives in
   portal.css §8C. This file adds ONLY the new controls the rebuilt editor needs
   — the brand-swatch strip and the stroke-width / text-size slider — so the
   editor module owns its own CSS and portal.css is left untouched. Square
   corners + Enduro palette, matching the portal. (photo-editor.js, 2026-07-07)
   ============================================================ */

/* --- Brand-swatch strip (one-tap colour), above the HSV picker ---------- */
.pe-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  width: min(248px, 78vw);
  padding: var(--s3);
  margin-bottom: 6px;
  background: var(--white);
  box-shadow: 0 12px 32px rgba(16, 24, 32, 0.22), inset 0 0 0 1px var(--border);
}
.pe-swatch {
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(16, 24, 32, 0.28);
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.pe-swatch:hover { transform: scale(1.08); }
.pe-swatch:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--accent); }

/* --- Size slider (context-aware: stroke width OR text size) ------------- */
/* The WIDTH SLIDER's styles (.pe-sizewrap / .pe-size-label / .pe-size-val / .pe-size and its
   four vendor track+thumb rules) were REMOVED 2026-07-29 — the control is now a button that opens
   a vertical menu of preset dots, styled below. Nothing renders a .pe-size any more. */
.pe-size:focus-visible::-moz-range-thumb     { box-shadow: 0 0 0 3px var(--accent-ring); }

/* Fabric wraps the <canvas> in .canvas-container — keep it square + centred. */
.pe-stage .canvas-container { border-radius: 0; margin: auto; }

/* THE MARK-UP CHIP IS RETIRED (owner 2026-07-29: "remove the icon and button with pencil,
   just the word comment is enough"). Its 6 rules went with the button photos.js no longer
   builds — markup opens by TAPPING THE PHOTO, which it always did. Nothing replaced it. */

/* ---- ZOOM: A SUBTLE SLIDER (LAPTOP) + A READOUT (2026-07-29) --------------------
   The slider is for a trackpad user who would not think to scroll on a canvas; the wheel and
   the pinch are the primary controls. LAPTOP ONLY — it is gated on a fine pointer, because on a
   phone the gesture IS the control and a slider would just eat toolbar width on the narrowest
   screen. Deliberately small and quiet: 88px, hairline track, no filled progress, so it reads
   as a utility and not as one of the tools.
   ⚠ `touch-action: none` ON THE CANVAS IS LOAD-BEARING for the pinch. Without it the browser
   claims a two-finger gesture as page zoom and the pointer events never arrive. The stage does
   not scroll, so nothing is lost by taking it. */
/* The rail is PARENTED TO FABRIC'S `.canvas-container` at runtime (photo-editor.js, start()),
   so these coordinates are relative to the photo box itself — top-right of the black area, and it
   does not move when the photo is zoomed or panned underneath it.
   LAPTOP ONLY, no touch device: on a phone the pinch IS the control, and a floating rail would sit
   on top of the evidence for no reason. */
.pe-zoomwrap { display: none; }
@media (hover: hover) and (pointer: fine) {
  .pe-zoomwrap {
    display: inline-flex; align-items: center; gap: var(--s2);
    position: absolute; top: 8px; right: 8px; z-index: 4;
    padding: 4px 8px;
    background: rgba(255, 255, 255, 0.92);   /* legible over any photo, and over the dark box */
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
  }
}
.pe-zoom-range {
  width: 88px; height: 2px; padding: 0; margin: 0;
  -webkit-appearance: none; appearance: none;
  background: var(--border); border-radius: 0; cursor: pointer;
}
.pe-zoom-range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 12px; height: 12px; border: 0; border-radius: 0;
  background: var(--text-2); cursor: pointer;
}
.pe-zoom-range::-moz-range-thumb {
  width: 12px; height: 12px; border: 0; border-radius: 0; background: var(--text-2);
}
.pe-canvas, .pe-stage .canvas-container, .pe-stage canvas { touch-action: none; }

/* ---- ZOOM READOUT ---------------------------------------------------------------
   Text only, never a control — the wheel is the control. It exists so a snap to one of the
   stops (25 · 50 · 75 · 100 · 150 · 200%) is visible; without it "snap" is invisible and the
   crew cannot tell 98% from 100%. Tabular figures so the box does not jitter as digits change,
   and a fixed min-width for the same reason at 3 digits. */
.pe-zoom {
  flex: none;
  min-width: 4ch;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
  text-align: right;
  user-select: none;
}

/* ---- STROKE THICKNESS — a button + a VERTICAL menu of dots (owner 2026-07-29) -------------
   Same shape as the colour control beside it: a small button showing the current choice, opening a
   popover of options. Four presets on a doubling scale, each drawn at its real thickness so the
   choice is visual rather than a number.
   IT RIDES ON THE PHOTO BOX, under the zoom rail (photo-editor.js parents it to Fabric's
   `.canvas-container` on every open), and it exists ONLY while a tool is chosen — `.has-tool` is
   set by setMode(). With no tool the drag pans the photo, so there is nothing to style. */
.pe-thickwrap { display: none; }
.pe-modal.has-tool .pe-thickwrap {
  display: block;
  position: absolute; top: 42px; right: 8px; z-index: 4;   /* directly under the zoom rail */
}
.pe-thick {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; padding: 0;
  background: rgba(255, 255, 255, 0.92); border: 0; cursor: pointer;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
  color: var(--black);
}
/* One dot, sized by --d, used both on the button and on every option. */
.pe-thick-dot {
  display: block;
  width: var(--d, 8px); height: var(--d, 8px);
  background: currentColor; border-radius: 50%;
}
.pe-thick-menu {
  position: absolute; top: 34px; right: 0;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 6px;
  background: var(--white);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.22);
}
.pe-thick-opt {
  display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; padding: 0;
  background: none; border: 0; cursor: pointer; color: var(--black);
}
.pe-thick-opt.is-on { background: var(--fill); }
@media (hover: hover) and (pointer: fine) {
  .pe-thick-opt:hover { background: var(--fill); }
}
.pe-thick:focus-visible, .pe-thick-opt:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--accent-ring); }

/* The magnifier that closes the zoom rail — decorative, so it never takes a pointer. */
.pe-zoom-ico { display: inline-flex; align-items: center; color: var(--text-2); pointer-events: none; }