/* ============================================================
   Image Mapper — tool-specific layout on top of ../Shared/theme.css
   Shared chrome (gradient header, hamburger nav, .nltm-canvas-frame,
   .nltm-dropzone) lives in theme.css; this file holds only the page
   layout unique to this tool. Tokens only — no hardcoded colors/fonts.
   ============================================================ */

/* ---------- Main / cards ---------- */

.im-main {
   max-width: 1080px;
   margin: 0 auto;
   padding: var(--nltm-sp-6) var(--nltm-sp-5) var(--nltm-sp-8);
   display: flex;
   flex-direction: column;
   gap: var(--nltm-sp-5);
}

.im-heading {
   font-family: var(--nltm-font-display);
   font-style: italic;
   font-weight: 600;
   font-size: var(--nltm-fs-4);
   color: var(--nltm-primary-deep);
   margin: 0 0 var(--nltm-sp-3);
}

.im-help {
   color: var(--nltm-muted);
   font-size: var(--nltm-fs-2);
   margin: 0 0 var(--nltm-sp-3);
}

/* ---------- Load row ---------- */

.im-load-row {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   gap: var(--nltm-sp-4);
   margin-bottom: var(--nltm-sp-4);
}
.im-load-row .im-spacer { flex: 1 1 auto; }

#paste-area {
   padding: var(--nltm-sp-4);
   width: 300px;
   max-width: 100%;
   box-sizing: border-box;
   color: var(--nltm-muted);
   background: var(--nltm-surface-2);
   margin-bottom: var(--nltm-sp-4);
}

.nltm-canvas-frame { margin-bottom: var(--nltm-sp-4); }
#imageCanvas {
   max-width: 100%;
   height: auto;
   background: var(--nltm-surface);
   border: 1px solid var(--nltm-line);
   border-radius: var(--nltm-radius-sm);
}

/* ---------- Adjustment grid + palette ---------- */

.im-adjust {
   display: flex;
   flex-wrap: wrap;
   gap: var(--nltm-sp-5);
   align-items: flex-start;
}
.im-fields {
   display: grid;
   grid-template-columns: max-content 110px max-content 110px;
   gap: var(--nltm-sp-2) var(--nltm-sp-3);
   align-items: center;
}
.im-fields label { font-size: var(--nltm-fs-2); color: var(--nltm-ink); text-align: right; }
.im-fields .nltm-input { width: 100%; box-sizing: border-box; }
#paletteCanvas {
   background: var(--nltm-surface);
   border: 1px solid var(--nltm-line);
   border-radius: var(--nltm-radius-sm);
}

/* ---------- Output ---------- */

.im-output-row {
   display: flex;
   align-items: center;
   gap: var(--nltm-sp-4);
   margin-bottom: var(--nltm-sp-3);
}
#outputText {
   width: 100%;
   box-sizing: border-box;
   font-family: var(--nltm-font-mono);
   font-size: var(--nltm-fs-2);
   resize: vertical;
}

@media (max-width: 640px) {
   .im-main { padding: var(--nltm-sp-5) var(--nltm-sp-4) var(--nltm-sp-7); }
   #FrameHeader.nltm-tool-header { flex-direction: column; gap: var(--nltm-sp-1); }
}