/* =========================================================================
   Photo editor.

   Sits on top of feature-graphic.css, which supplies the dark app shell
   (.fgapp, .fg-bar, .fg-side, .fg-stage). Only the photo-specific pieces
   live here.
   ========================================================================= */

/* The stage is a viewing surface, so it goes darker than the tool chrome and
   drops the dot grid — a texture behind a photograph fights with it. */
.fgapp .fg-stage {
  background: #050506;
  background-image: none;
  position: relative;
  overflow: hidden;
}

.pe-stage { display: none; }
.pe-stage.show { display: block; }
.pe-stage canvas {
  display: block;
  box-shadow: 0 4px 12px rgba(0,0,0,.5), 0 30px 70px -30px rgba(0,0,0,.9);
  /* A checkerboard shows through where rotation leaves the frame empty. */
  background-image:
    linear-gradient(45deg, #1a1a1e 25%, transparent 25%, transparent 75%, #1a1a1e 75%),
    linear-gradient(45deg, #1a1a1e 25%, transparent 25%, transparent 75%, #1a1a1e 75%);
  background-size: 18px 18px;
  background-position: 0 0, 9px 9px;
}

/* ----- drop target ------------------------------------------------------- */
.pe-drop {
  position: absolute; inset: 26px;
  display: grid; place-items: center; cursor: pointer;
  border: 1px dashed var(--border-2); border-radius: 10px;
  color: var(--muted); text-align: center;
}
.pe-drop:hover, .pe-drop.over { border-color: var(--accent-bord); color: var(--accent-hi); }
.pe-drop-in b { display: block; font: 600 15px "Inter", sans-serif; color: var(--text-2); margin-bottom: 5px; }
.pe-drop-in span { font-size: 12px; }
/* Once a photo is in, the prompt gets out of the way entirely — it was
   sitting on top of the picture. The whole stage stays a drop target, and
   "Open photo" is in the appbar. */
.pe-drop.compact { display: none; }
/* Dragging over the stage still shows a target. */
.fgapp .fg-stage.dragover::after {
  content: "Drop to replace";
  position: absolute; inset: 18px; z-index: 3;
  display: grid; place-items: center; border-radius: 10px;
  border: 2px dashed var(--accent); background: rgba(10,10,11,.66);
  color: var(--accent-hi); font: 600 14px "Inter", sans-serif;
}

.fgapp .tool-error {
  position: absolute; top: 18px; left: 26px; right: 26px;
  display: none; padding: 10px 13px; border-radius: 6px;
  background: rgba(180,83,9,.18); border: 1px solid #B45309;
  color: #FDE68A; font-size: 12px; line-height: 1.5;
}
.fgapp .tool-error.show { display: block; }

/* ----- sidebar controls -------------------------------------------------- */
.pe-hist {
  width: 100%; height: 60px; display: block;
  background: #0A0A0B; border: 1px solid var(--border); border-radius: 4px;
}
.pe-curve {
  width: 100%; aspect-ratio: 1; display: block; cursor: crosshair;
  background: #0A0A0B; border: 1px solid var(--border); border-radius: 4px;
  touch-action: none;
}

.pe-row { display: flex; align-items: center; gap: 9px; margin-bottom: 7px; }
.pe-row:last-child { margin-bottom: 0; }
.pe-row label { flex: 0 0 82px; font-size: 11.5px; color: var(--muted); }
.pe-row input[type=range] { flex: 1; min-width: 0; accent-color: var(--accent); }

/* The value doubles as the per-slider reset, so it is a button that only
   looks like a label until you hover it. */
.pe-val {
  flex: 0 0 46px; text-align: right; cursor: pointer;
  padding: 2px 4px; border: 0; border-radius: 3px; background: none;
  font: 500 10px var(--mono-f); color: var(--muted-2);
}
.pe-val:hover { background: var(--surface-3); color: var(--text); }

.pe-reset {
  margin-left: auto; padding: 2px 7px; cursor: pointer;
  border: 1px solid var(--border-2); border-radius: 3px;
  background: none; color: var(--muted-2);
  font: 500 9px var(--mono-f); letter-spacing: .08em; text-transform: uppercase;
}
.pe-reset:hover { color: var(--accent-hi); border-color: var(--accent-bord); }
.fg-sec h3 { align-items: center; }
/* the h3::after rule in the shell would push the reset button off the end */
.fg-sec h3:has(.pe-reset)::after { display: none; }

.pe-presets { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.pe-presets button { flex: none; }
.pe-ratios { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.pe-ratios button { flex: none; }

.fg-bar .fg-btn.on { background: var(--accent-soft); border-color: var(--accent-bord); color: var(--accent-hi); }

/* ----- no WebGL2 --------------------------------------------------------- */
.pe-nogl {
  max-width: 560px; margin: 12vh auto; padding: 0 24px;
  color: var(--text, #FAFAFA); font: 15px/1.6 "Inter", sans-serif;
}
.pe-nogl h2 { font: 700 30px "Inter", sans-serif; letter-spacing: -.02em; margin: 0 0 12px; }
.pe-nogl p { color: #A1A1AA; }
.pe-nogl a { color: #818CF8; }

@media (max-width: 900px) {
  .pe-presets { grid-template-columns: 1fr 1fr 1fr; }
  .fgapp .fg-stage { min-height: 46vh; }
}

/* ----- drag to crop ------------------------------------------------------ */
.pe-stage { position: relative; }
.pe-crop { position: absolute; inset: 0; }

/* Everything outside the crop is dimmed with four rects rather than a
   box-shadow, so the shade is exact at any rect and never bleeds. */
.pe-crop-shade { position: absolute; inset: 0; pointer-events: none; }
.pe-crop-shade i {
  position: absolute; background: rgba(5,5,6,.62); display: block;
}

.pe-crop-box {
  position: absolute; cursor: move;
  outline: 1px solid rgba(255,255,255,.9);
  box-shadow: 0 0 0 1px rgba(0,0,0,.45);
}
/* rule of thirds, drawn with two gradients rather than four child elements */
.pe-crop-box::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to right, transparent calc(33.333% - 0.5px), rgba(255,255,255,.35) calc(33.333% - 0.5px),
      rgba(255,255,255,.35) calc(33.333% + 0.5px), transparent calc(33.333% + 0.5px),
      transparent calc(66.666% - 0.5px), rgba(255,255,255,.35) calc(66.666% - 0.5px),
      rgba(255,255,255,.35) calc(66.666% + 0.5px), transparent calc(66.666% + 0.5px)),
    linear-gradient(to bottom, transparent calc(33.333% - 0.5px), rgba(255,255,255,.35) calc(33.333% - 0.5px),
      rgba(255,255,255,.35) calc(33.333% + 0.5px), transparent calc(33.333% + 0.5px),
      transparent calc(66.666% - 0.5px), rgba(255,255,255,.35) calc(66.666% - 0.5px),
      rgba(255,255,255,.35) calc(66.666% + 0.5px), transparent calc(66.666% + 0.5px));
}

.pe-h {
  position: absolute; width: 16px; height: 16px; z-index: 2;
  /* the visible mark is smaller than the grab area, which is what makes
     corner handles usable without them dominating the picture */
  background: no-repeat center / 10px 10px;
}
.pe-h::after {
  content: ""; position: absolute; background: #FAFAFA;
  box-shadow: 0 0 0 1px rgba(0,0,0,.5);
}
.pe-h[data-h="nw"], .pe-h[data-h="ne"], .pe-h[data-h="sw"], .pe-h[data-h="se"] { width: 22px; height: 22px; }
.pe-h[data-h="nw"]::after, .pe-h[data-h="ne"]::after,
.pe-h[data-h="sw"]::after, .pe-h[data-h="se"]::after { width: 12px; height: 12px; border-radius: 2px; }
.pe-h[data-h="n"]::after, .pe-h[data-h="s"]::after { width: 22px; height: 4px; border-radius: 2px; left: -3px; top: 6px; }
.pe-h[data-h="e"]::after, .pe-h[data-h="w"]::after { width: 4px; height: 22px; border-radius: 2px; top: -3px; left: 6px; }

.pe-h[data-h="nw"] { left: -11px; top: -11px; cursor: nwse-resize; }
.pe-h[data-h="ne"] { right: -11px; top: -11px; cursor: nesw-resize; }
.pe-h[data-h="sw"] { left: -11px; bottom: -11px; cursor: nesw-resize; }
.pe-h[data-h="se"] { right: -11px; bottom: -11px; cursor: nwse-resize; }
.pe-h[data-h="nw"]::after { right: 0; bottom: 0; }
.pe-h[data-h="ne"]::after { left: 0; bottom: 0; }
.pe-h[data-h="sw"]::after { right: 0; top: 0; }
.pe-h[data-h="se"]::after { left: 0; top: 0; }
.pe-h[data-h="n"] { left: 50%; top: -8px; margin-left: -8px; cursor: ns-resize; }
.pe-h[data-h="s"] { left: 50%; bottom: -8px; margin-left: -8px; cursor: ns-resize; }
.pe-h[data-h="w"] { top: 50%; left: -8px; margin-top: -8px; cursor: ew-resize; }
.pe-h[data-h="e"] { top: 50%; right: -8px; margin-top: -8px; cursor: ew-resize; }

.pe-cropbtn { width: 100%; justify-content: center; margin-bottom: 8px; }
.pe-cropbtn.on { background: var(--accent-lo); border-color: var(--accent); color: #fff; }

/* ----- local adjustment masks -------------------------------------------- */
.pe-mask-ui { position: absolute; inset: 0; overflow: visible; }
.pe-mask-ui .ring { fill: none; stroke: #FAFAFA; stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.pe-mask-ui .ring.shadowed { stroke: rgba(0,0,0,.5); stroke-width: 3.5; }
.pe-mask-ui .grab { fill: #FAFAFA; stroke: rgba(0,0,0,.5); stroke-width: 1; cursor: grab; }
.pe-mask-ui .hit { fill: transparent; stroke: transparent; stroke-width: 18; cursor: move; }
.pe-mask-ui .band { stroke: rgba(255,255,255,.55); stroke-width: 1; stroke-dasharray: 5 5; fill: none; vector-effect: non-scaling-stroke; }

.pe-masks { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; }
.pe-mask {
  display: flex; align-items: center; gap: 8px; padding: 6px 8px; cursor: pointer;
  border: 1px solid var(--border); border-radius: 3px; background: var(--surface-2);
}
.pe-mask:hover { border-color: var(--border-2); }
.pe-mask.on { border-color: var(--accent-bord); background: var(--accent-soft); }
.pe-mask .k {
  flex: 0 0 26px; height: 20px; display: grid; place-items: center; border-radius: 2px;
  background: var(--surface-3); font: 600 9px var(--mono-f); color: var(--muted);
}
.pe-mask.on .k { color: var(--accent-hi); }
.pe-mask .t { flex: 1; min-width: 0; font-size: 12px; color: var(--text-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pe-mask.off .t { color: var(--muted-3); text-decoration: line-through; }
.pe-mask button {
  flex: 0 0 auto; padding: 2px 5px; cursor: pointer; border: 1px solid transparent;
  border-radius: 2px; background: none; color: var(--muted-3); font: 500 12px var(--mono-f);
}
.pe-mask button:hover { color: var(--text); background: var(--surface-3); }
.pe-mask button.del:hover { color: var(--danger); }
.pe-mask-empty {
  padding: 12px 10px; text-align: center; border: 1px dashed var(--border-2);
  border-radius: 3px; color: var(--muted-3); font-size: 11px;
}

/* ---- Revision 4: three-column workspace --------------------------------- */
.fgapp .fg-body { grid-template-columns: 240px minmax(0, 1fr) 252px; }
.fg-side.right { border-right: 0; border-left: 1px solid var(--border); }
@media (max-width: 900px) {
  .fgapp .fg-body { display: flex; flex-direction: column; }
  .fg-side.right { border-left: 0; border-top: 1px solid var(--border); order: 3; }
}

/* ---- Revision 5: design parity ------------------------------------------ */

/* toolbar: gold upload affordance + the two dropdowns */
.fg-btn.gold { border-color: rgba(212,175,55,.45); color: var(--accent); }
.fg-btn.gold:hover { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-hi); }
.pe-dd { position: relative; display: inline-flex; }
.pe-menu {
  position: absolute; top: 40px; left: 0; z-index: 40; width: 232px;
  display: flex; flex-direction: column; gap: 4px;
  background: #26272D; border: 1px solid rgba(255,255,255,.12); border-radius: 10px;
  padding: 8px; box-shadow: 0 20px 50px -16px rgba(0,0,0,.8);
}
.pe-menu.right { left: auto; right: 0; }
.pe-menu[hidden] { display: none; }
.pe-mi {
  padding: 9px 12px; border: 0; border-radius: 6px; background: none; cursor: pointer;
  font: 600 12.5px "Inter", sans-serif; color: #fff; text-align: left;
}
.pe-mi:hover { background: var(--accent-soft); }
.pe-mi span { display: block; margin-top: 2px; font: 400 10.5px "Inter", sans-serif; color: rgba(255,255,255,.45); }
.pe-mnote {
  padding: 8px 12px 4px; border-top: 1px solid rgba(255,255,255,.1); margin-top: 4px;
  font: 400 10.5px "Inter", sans-serif; color: rgba(255,255,255,.45);
}
.pe-mh { font: 600 9px var(--mono-f); letter-spacing: .14em; color: rgba(255,255,255,.4); padding: 4px 4px 0; }
.pe-menu .fg-seg { padding: 0 2px; }
.pe-menu .pe-row { padding: 2px 4px 0; }
.pe-mgo { justify-content: center; margin-top: 6px; }

/* presets rail */
.pe-gold { color: var(--accent) !important; }
.pe-save {
  margin-left: auto; padding: 0; border: 0; background: none; cursor: pointer;
  font: 600 10px "Inter", sans-serif; color: rgba(255,255,255,.45);
}
.pe-save:hover { color: var(--accent-hi); }
.fg-sec h3:has(.pe-save)::after { display: none; }
.pe-presets { display: flex; flex-direction: column; gap: 4px; }
.pe-pre {
  position: relative; display: flex; justify-content: space-between; align-items: center;
  background: var(--surface-3); border: 1px solid transparent; border-radius: 6px;
  padding: 8px 11px; cursor: pointer; text-align: left;
}
.pe-pre:hover { border-color: rgba(255,255,255,.14); }
.pe-pre.on { background: var(--accent-soft); border-color: var(--accent-bord); }
.pe-pre .n { font: 600 11.5px "Inter", sans-serif; color: #fff; }
.pe-pre .g { font: 500 9px var(--mono-f); color: rgba(255,255,255,.4); }
.pe-pre .x {
  position: absolute; right: -4px; top: -6px; display: none;
  width: 16px; height: 16px; border-radius: 50%; text-align: center; line-height: 15px;
  background: #3A3B42; color: rgba(255,255,255,.7); font: 600 11px "Inter", sans-serif;
}
.pe-pre:hover .x { display: block; }
.pe-pre .x:hover { background: var(--danger); color: #fff; }
.pe-strength { margin-top: 10px; }

/* two-line slider rows: name and value up top, a thin track below */
.fg-side .pe-row, .pe-menu .pe-row {
  display: grid; grid-template-columns: 1fr auto; gap: 1px 8px;
  align-items: center; margin-bottom: 9px;
}
.fg-side .pe-row label, .pe-menu .pe-row label {
  flex: none; font: 500 11px "Inter", sans-serif; color: rgba(255,255,255,.7);
}
.fg-side .pe-row .pe-val, .pe-menu .pe-row .pe-val {
  flex: none; grid-column: 2; grid-row: 1;
  font: 500 9.5px var(--mono-f); color: rgba(255,255,255,.5);
}
.fg-side .pe-row input[type=range], .pe-menu .pe-row input[type=range] {
  grid-column: 1 / -1; width: 100%;
}
.fg-side .pe-row .fg-check { grid-column: 1 / -1; }

/* the thin design track with a round white thumb */
.fg-side input[type=range], .pe-menu input[type=range] {
  -webkit-appearance: none; appearance: none;
  height: 16px; background: transparent; margin: 0; cursor: pointer;
}
.fg-side input[type=range]::-webkit-slider-runnable-track,
.pe-menu input[type=range]::-webkit-slider-runnable-track {
  height: 3px; border-radius: 2px; background: var(--surface-3);
}
.fg-side input[type=range]::-webkit-slider-thumb,
.pe-menu input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 10px; height: 10px; margin-top: -3.5px; border-radius: 50%;
  background: #fff; border: 0; box-shadow: 0 0 0 1px rgba(0,0,0,.35);
}
.fg-side input[type=range]::-moz-range-track,
.pe-menu input[type=range]::-moz-range-track {
  height: 3px; border-radius: 2px; background: var(--surface-3);
}
.fg-side input[type=range]::-moz-range-thumb,
.pe-menu input[type=range]::-moz-range-thumb {
  width: 10px; height: 10px; border-radius: 50%;
  background: #fff; border: 0; box-shadow: 0 0 0 1px rgba(0,0,0,.35);
}
/* centre notch on bidirectional sliders */
.pe-row.mid input[type=range]::-webkit-slider-runnable-track {
  background: linear-gradient(90deg,
    var(--surface-3) 0 calc(50% - 0.5px),
    rgba(255,255,255,.25) calc(50% - 0.5px) calc(50% + 0.5px),
    var(--surface-3) calc(50% + 0.5px));
}
.pe-row.mid input[type=range]::-moz-range-track {
  background: linear-gradient(90deg,
    var(--surface-3) 0 calc(50% - 0.5px),
    rgba(255,255,255,.25) calc(50% - 0.5px) calc(50% + 0.5px),
    var(--surface-3) calc(50% + 0.5px));
}
/* temperature and tint tracks show what the slider does */
#s_temp::-webkit-slider-runnable-track, #mk_temp::-webkit-slider-runnable-track {
  background: linear-gradient(90deg, #4A7BD0, var(--surface-3), #D08A3E) !important;
}
#s_tint::-webkit-slider-runnable-track, #mk_tint::-webkit-slider-runnable-track {
  background: linear-gradient(90deg, #4CAF7D, var(--surface-3), #C05CB8) !important;
}
#s_temp::-moz-range-track, #mk_temp::-moz-range-track {
  background: linear-gradient(90deg, #4A7BD0, var(--surface-3), #D08A3E) !important;
}
#s_tint::-moz-range-track, #mk_tint::-moz-range-track {
  background: linear-gradient(90deg, #4CAF7D, var(--surface-3), #C05CB8) !important;
}

/* tone curve inset panel */
.pe-curvebox {
  background: #101114; border: 1px solid rgba(255,255,255,.1);
  border-radius: 6px; padding: 8px;
}
.pe-curve {
  width: 100%; height: 96px; aspect-ratio: auto; display: block; cursor: crosshair;
  background: none; border: 0; border-radius: 0; touch-action: none;
}

/* mask chips */
.pe-maskseg button { flex: 1; }
.pe-mask .ev { flex: 0 0 auto; font: 500 9px var(--mono-f); color: rgba(255,255,255,.4); }
.pe-mask.on .ev { color: var(--accent-hi); }

/* stage: metadata captions and the zoom cluster */
#viewport { overflow: auto; }
.pe-stage { margin: auto; }
.pe-stage canvas { touch-action: none; }
.pe-meta {
  position: absolute; bottom: 12px; z-index: 4;
  font: 500 9.5px var(--mono-f); color: rgba(255,255,255,.35); letter-spacing: .04em;
}
.pe-meta.left { left: 16px; }
.pe-meta.right { right: 16px; }
.pe-zoom { display: flex; gap: 8px; }
.pe-zoom button {
  border: 0; background: none; padding: 0; cursor: pointer;
  font: 600 10px var(--mono-f); color: rgba(255,255,255,.5); letter-spacing: .04em;
}
.pe-zoom button:hover { color: #fff; }
.pe-zoom button.on { color: var(--accent); }

/* split before / after */
.pe-split {
  position: absolute; inset: 0; width: 50%; overflow: hidden;
  pointer-events: none; border-right: 1.5px solid var(--accent); z-index: 3;
}
.pe-split canvas { display: block; }
.pe-splitlbl {
  position: absolute; top: 10px; left: 10px;
  background: rgba(0,0,0,.55); color: #fff;
  font: 600 9px var(--mono-f); padding: 3px 7px; border-radius: 4px;
}

/* crop ratio pills in mono, per the design */
.pe-ratios { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; }
.pe-ratios button {
  border: 0; border-radius: 5px; padding: 6px 0; cursor: pointer; text-align: center;
  background: var(--surface-3); color: rgba(255,255,255,.75);
  font: 600 10px var(--mono-f);
}
.pe-ratios button:hover { color: #fff; }
.pe-ratios button.on { background: var(--accent); color: #17181C; font-weight: 700; }

/* EXIF panel + strip toggle */
.pe-exif {
  background: #101114; border: 1px solid rgba(255,255,255,.1); border-radius: 6px;
  padding: 10px 11px; display: flex; flex-direction: column; gap: 5px;
}
.pe-exif > span { display: flex; justify-content: space-between; gap: 10px; }
.pe-exif .k { font: 500 10px var(--mono-f); color: rgba(255,255,255,.4); }
.pe-exif .v {
  font: 500 10px var(--mono-f); color: #fff; text-align: right;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pe-strip {
  display: flex; justify-content: space-between; align-items: center; width: 100%;
  background: var(--surface-3); border: 1px solid rgba(76,175,125,.45); border-radius: 6px;
  padding: 8px 11px; margin-top: 6px; cursor: pointer;
  font: 600 11px "Inter", sans-serif; color: #fff;
}
.pe-strip .tag { font: 700 9px var(--mono-f); color: #4CAF7D; }
.pe-strip.off { border-color: rgba(255,255,255,.06); }
.pe-strip.off .tag { color: rgba(255,255,255,.4); }

/* batch card */
.pe-batch {
  background: #0A192F; border: 1px solid rgba(212,175,55,.25); border-radius: 8px;
  padding: 12px 13px;
}
.pe-batch .t { font: 600 11.5px "Inter", sans-serif; color: #fff; }
.pe-batch .d { font: 400 10.5px/1.5 "Inter", sans-serif; color: rgba(255,255,255,.5); margin-top: 4px; }
.pe-batchbtn {
  display: inline-block; margin-top: 8px; cursor: pointer;
  border: 1.5px dashed rgba(212,175,55,.45); border-radius: 6px; background: none;
  color: var(--accent); font: 600 10.5px "Inter", sans-serif; padding: 7px 12px;
}
.pe-batchbtn:hover { border-color: var(--accent); color: var(--accent-hi); }
.pe-batchbtn:disabled { opacity: .7; cursor: default; }

/* status line preset note */
.fg-status .meta#statusNote { color: rgba(255,255,255,.35); }

/* the four-up action row must not clip its labels */
.fg-side .fg-seg button { padding: 7px 5px; font-size: 10.5px; min-width: 0; }