/* Image Tools — uses the PDF Tools shell (../pdf-tools/pdf-tools.css) for the
   nav, sidebar, .content, .tool-head and .drop. This file styles the editor:
   the canvas stage + the per-tool control blocks on the right. */

/* editor layout: photo stage on the left, the active tool's controls on the right */
.it-editor { display: grid; grid-template-columns: 1fr 320px; gap: 20px; align-items: start; }
@media (max-width: 880px) { .it-editor { grid-template-columns: 1fr; } }

.it-stage {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: 16px; min-height: 320px; display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.it-canvas-wrap { position: relative; display: inline-block; line-height: 0; max-width: 100%; touch-action: none; }
#canvas { max-width: 100%; height: auto; border-radius: 6px; display: block; background:
  repeating-conic-gradient(var(--surface-2) 0% 25%, transparent 0% 50%) 50% / 20px 20px; }
.it-meta { color: var(--text-muted); font-size: 12.5px; margin-top: 12px; font-family: var(--font-mono); }

/* crop overlay */
.it-crop { position: absolute; border: 1.5px solid #fff; box-shadow: 0 0 0 9999px rgba(0,0,0,0.45); cursor: move; }
.it-crop .h { position: absolute; width: 14px; height: 14px; background: #fff; border: 1.5px solid var(--accent); border-radius: 3px; }
.h-nw { left: -8px; top: -8px; cursor: nwse-resize; }
.h-ne { right: -8px; top: -8px; cursor: nesw-resize; }
.h-sw { left: -8px; bottom: -8px; cursor: nesw-resize; }
.h-se { right: -8px; bottom: -8px; cursor: nwse-resize; }

/* right-hand controls (one .it-tool block shows at a time) */
.it-controls { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 18px; display: flex; flex-direction: column; gap: 16px; position: sticky; top: 8px; }
.it-tool { display: flex; flex-direction: column; gap: 16px; }
.it-group { display: flex; flex-direction: column; gap: 8px; }
.it-label { font-size: 12.5px; font-weight: 600; color: var(--text); text-transform: uppercase; letter-spacing: .03em; }
.it-q { float: right; color: var(--accent); font-weight: 700; }
.it-row { display: flex; gap: 10px; align-items: flex-end; }
.it-mini { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--text-muted); flex: 1; }
.it-mini input { width: 100%; }
.it-unit { padding-bottom: 9px; color: var(--text-muted); font-size: 13px; }
.it-chk { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-muted); white-space: nowrap; padding-bottom: 8px; }
.it-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.it-hint { font-size: 11.5px; color: var(--text-muted); line-height: 1.45; }

.it-loc { font-size: 13px; color: var(--text); line-height: 1.5; }
.it-loc .coords { font-family: var(--font-mono); font-weight: 600; }
.it-loc a { color: var(--accent); font-weight: 600; }
.it-loc .muted { color: var(--text-muted); }
.it-loc .when { color: var(--text-muted); font-size: 12px; display: block; margin-top: 4px; }

.it-out { font-size: 13px; color: var(--text); min-height: 20px; border-top: 1px solid var(--border); padding-top: 14px; }
.it-out .ok { color: var(--ok); font-weight: 600; }
.it-out .warn { color: var(--warn); }

.it-actions { display: flex; flex-direction: column; gap: 8px; }
.it-actions .pt-btn { width: 100%; }

input[type="range"] { width: 100%; accent-color: var(--accent); }