/* ============================================================
   MagicEye — tool-specific styles
   Ported from the legacy inline <style> block, tokenized
   against ../Shared/theme.css. Selectors are unchanged so the
   inline JS that toggles .active / .drag-over keeps working.
   ============================================================ */

#controls {
   margin-bottom: var(--nltm-sp-3);
   padding: var(--nltm-sp-4);
}

.control-row {
   margin-bottom: var(--nltm-sp-2);
}

/* Border / drag-active state come from .nltm-dropzone (theme.css). */
canvas {
   image-rendering: pixelated;
   cursor: crosshair;
}

label {
   margin-right: var(--nltm-sp-3);
   display: inline-block;
}

button {
   padding: var(--nltm-sp-2) var(--nltm-sp-3);
   margin-right: var(--nltm-sp-2);
   cursor: pointer;
}

#layerControls {
   margin-top: var(--nltm-sp-3);
   padding: var(--nltm-sp-3);
   border: 1px solid var(--nltm-line);
   border-radius: var(--nltm-radius-sm);
   background-color: var(--nltm-surface-2);
}

.layer-item {
   margin-bottom: var(--nltm-sp-3);
   padding: var(--nltm-sp-2);
   border: 1px solid var(--nltm-line);
   background-color: var(--nltm-surface);
   border-radius: var(--nltm-radius-sm);
}

.layer-header {
   font-weight: bold;
   margin-bottom: var(--nltm-sp-2);
}

.layer-control {
   display: inline-block;
   margin-right: var(--nltm-sp-3);
   margin-bottom: var(--nltm-sp-2);
}

.layer-control label {
   display: inline;
   margin-right: var(--nltm-sp-2);
}

.layer-control input[type="range"] {
   vertical-align: middle;
}

.layer-control select {
   padding: var(--nltm-sp-1);
}

.slider-row {
   display: flex;
   align-items: center;
   gap: var(--nltm-sp-2);
   margin-bottom: var(--nltm-sp-2);
   width: 100%;
}

.slider-row label {
   min-width: 110px;
   flex-shrink: 0;
}

.slider-row input[type="range"] {
   flex: 1;
   min-width: 100px;
   accent-color: var(--nltm-primary);
}

.slider-row .slider-value {
   min-width: 80px;
   flex-shrink: 0;
   font-family: var(--nltm-font-mono);
}

.flip-row {
   margin-top: var(--nltm-sp-2);
   margin-bottom: var(--nltm-sp-2);
}

.flip-btn {
   padding: var(--nltm-sp-1) var(--nltm-sp-3);
   margin-right: var(--nltm-sp-2);
   background-color: var(--nltm-surface-2);
   border: 1px solid var(--nltm-line);
   color: var(--nltm-ink);
   cursor: pointer;
   border-radius: var(--nltm-radius-sm);
   font-size: var(--nltm-fs-1);
}

.flip-btn:hover {
   background-color: var(--nltm-bg-tint);
}

.flip-btn.active {
   background-color: var(--nltm-primary);
   color: var(--nltm-surface);
   border-color: var(--nltm-primary-deep);
}

.remove-btn {
   padding: var(--nltm-sp-1) var(--nltm-sp-2);
   background-color: #d9534f; /* danger: no token in theme — intentional literal */
   color: #fff;
   border: none;
   border-radius: var(--nltm-radius-sm);
   cursor: pointer;
   font-size: var(--nltm-fs-1);
}

.remove-btn:hover {
   background-color: #c9302c;
}