/* ── Passport Photo Maker — tool-specific styles ──────────────────────────────
   Global styles are inherited from /css/style.css. Colours reference the
   site's CSS custom properties only — no hardcoded colors — so the tool
   matches both light and dark mode automatically.
   ─────────────────────────────────────────────────────────────────────────── */

.ppm-page { display: flex; flex-direction: column; gap: 0; }

/* ── Shared field helpers ─────────────────────────────────────────────────── */

.ppm-field { display: flex; flex-direction: column; gap: 0.4rem; min-width: 0; margin-bottom: var(--space-4); }
.ppm-field:last-child { margin-bottom: 0; }
.ppm-label { font-size: 0.875rem; font-weight: 500; color: var(--text-2); }
.ppm-help { margin: 0; font-size: 0.8rem; color: var(--text-2); opacity: 0.8; }

.ppm-field-row { display: flex; align-items: flex-end; gap: 0.75rem; flex-wrap: wrap; margin-bottom: var(--space-4); }
.ppm-field-sm { min-width: 100px; flex: 1; }
@media (max-width: 520px) { .ppm-field-row { flex-direction: column; align-items: stretch; } }

/* ── Upload dropzone ──────────────────────────────────────────────────────── */

.ppm-dropzone {
  width: 100%;
  min-height: 170px;
  border: 2px dashed var(--border-2);
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition);
  padding: 1.5rem 1rem;
  margin-bottom: var(--space-3);
}
.ppm-dropzone:hover,
.ppm-dropzone.is-dragover {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.ppm-dropzone__icon { font-size: 2.5rem; margin-bottom: 10px; display: block; }
.ppm-dropzone__text { font-size: 1rem; font-weight: 500; color: var(--text); margin: 0; }
.ppm-dropzone__sub { font-size: 0.8rem; color: var(--text-2); opacity: 0.75; margin: 4px 0 0; }
.ppm-dropzone__choose-btn { margin-top: 12px; }

.ppm-file-info { margin: 0 0 var(--space-4); font-size: 0.85rem; color: var(--text-2); }
.ppm-file-info[hidden] { display: none; }

.ppm-error { margin: 0 0 var(--space-4); color: var(--color-danger, #ef4444); font-size: 0.875rem; }
.ppm-error[hidden] { display: none; }

/* ── Preset / sheet / copies pills ────────────────────────────────────────── */

.ppm-preset-row { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: var(--space-2); }
.ppm-preset-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.9rem;
  border: 1px solid var(--border-2);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 500;
  transition: border-color var(--transition), background var(--transition);
}
.ppm-preset-pill:hover { border-color: var(--accent); }
.ppm-preset-pill.is-active { border-color: var(--accent); background: var(--accent-soft); }

.ppm-target-size { margin: var(--space-2) 0 0; font-size: 0.85rem; color: var(--text-2); font-family: var(--font-mono, monospace); }

/* ── Custom size fields ───────────────────────────────────────────────────── */

.ppm-custom-fields { margin-top: var(--space-3); }
.ppm-custom-fields[hidden] { display: none; }
.ppm-custom-row { display: flex; gap: 0.75rem; flex-wrap: wrap; align-items: flex-end; }

.ppm-unit-row { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.ppm-unit-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.45rem 0.8rem;
  border: 1px solid var(--border-2);
  border-radius: 999px;
  cursor: pointer;
  font-size: 0.85rem;
}
.ppm-unit-pill:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.ppm-unit-pill input { accent-color: var(--accent); }

/* ── Crop stage ───────────────────────────────────────────────────────────── */

.ppm-crop-section { margin-top: var(--space-5); padding-top: var(--space-5); border-top: 1px solid var(--border); }
.ppm-crop-section[hidden] { display: none; }

.ppm-slider { width: 100%; accent-color: var(--accent); cursor: pointer; }

.ppm-stage-wrap {
  position: relative;
  width: 100%;
  max-width: 480px;
  margin: var(--space-3) auto var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  background-image:
    linear-gradient(45deg, #eee 25%, transparent 25%),
    linear-gradient(-45deg, #eee 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #eee 75%),
    linear-gradient(-45deg, transparent 75%, #eee 75%);
  background-size: 16px 16px;
  background-position: 0 0, 0 8px, 8px -8px, -8px 0px;
  touch-action: none;
}
#ppm-canvas { display: block; width: 100%; height: auto; user-select: none; -webkit-user-drag: none; }

.ppm-crop-overlay {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  pointer-events: none;
}
.ppm-crop-box {
  position: absolute;
  border: 2px solid #fff;
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.5);
  cursor: move;
  pointer-events: auto;
}
.ppm-crop-handle {
  position: absolute;
  width: 14px;
  height: 14px;
  background: #fff;
  border: 1.5px solid var(--accent);
  border-radius: 3px;
  pointer-events: auto;
}
.ppm-crop-handle[data-handle="nw"] { top: -7px; left: -7px; cursor: nw-resize; }
.ppm-crop-handle[data-handle="n"]  { top: -7px; left: 50%; transform: translateX(-50%); cursor: n-resize; }
.ppm-crop-handle[data-handle="ne"] { top: -7px; right: -7px; cursor: ne-resize; }
.ppm-crop-handle[data-handle="e"]  { top: 50%; right: -7px; transform: translateY(-50%); cursor: e-resize; }
.ppm-crop-handle[data-handle="se"] { bottom: -7px; right: -7px; cursor: se-resize; }
.ppm-crop-handle[data-handle="s"]  { bottom: -7px; left: 50%; transform: translateX(-50%); cursor: s-resize; }
.ppm-crop-handle[data-handle="sw"] { bottom: -7px; left: -7px; cursor: sw-resize; }
.ppm-crop-handle[data-handle="w"]  { top: 50%; left: -7px; transform: translateY(-50%); cursor: w-resize; }

/* Decorative face-framing guide, drawn as CSS shapes inside the crop box.
   Purely visual — never enforced. */
.ppm-guide-oval {
  position: absolute;
  left: 18%;
  right: 18%;
  top: 10%;
  bottom: 22%;
  border: 1.5px dashed rgba(255, 255, 255, 0.75);
  border-radius: 50%;
  pointer-events: none;
}
.ppm-guide-eyeline {
  position: absolute;
  left: 6%;
  right: 6%;
  top: 38%;
  border-top: 1.5px dashed rgba(255, 255, 255, 0.6);
  pointer-events: none;
}

/* ── Result preview ───────────────────────────────────────────────────────── */

.ppm-result-row {
  display: flex;
  gap: var(--space-4);
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: var(--space-5);
}
.ppm-result-preview {
  flex-shrink: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 6px;
  background-image:
    linear-gradient(45deg, #eee 25%, transparent 25%),
    linear-gradient(-45deg, #eee 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #eee 75%),
    linear-gradient(-45deg, transparent 75%, #eee 75%);
  background-size: 16px 16px;
  background-position: 0 0, 0 8px, 8px -8px, -8px 0px;
}
#ppm-result-canvas { display: block; max-width: 120px; max-height: 150px; }
.ppm-result-info { flex: 1; min-width: 180px; }
.ppm-result-info .ppm-label { margin-bottom: 0.2rem; }

/* ── Print sheet card ─────────────────────────────────────────────────────── */

.ppm-sheet-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  margin-bottom: var(--space-5);
  background: var(--surface-2);
}
.ppm-sheet-card > .ppm-label:first-child { font-size: 1rem; font-weight: 600; color: var(--text); margin-bottom: var(--space-3); }

#ppm-sheet-fit-note { margin-top: 0.35rem; }

/* ── Actions ──────────────────────────────────────────────────────────────── */

.ppm-actions { display: flex; gap: 0.6rem; flex-wrap: wrap; margin-top: var(--space-2); }

.ppm-privacy-notice { font-size: 0.8rem; color: var(--text-2); opacity: 0.75; text-align: center; margin: var(--space-5) 0 0; }