/* ============================================================
   Substitution Tester — tool-specific layout on top of
   ../Shared/theme.css. Shared chrome (gradient header, hamburger
   nav, .nltm-check, .nltm-card, .nltm-button, .nltm-input) lives
   in theme.css; this file only holds the layout unique to this
   tool. Tokens only — no hardcoded colors/fonts.
   ============================================================ */

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

.st-main {
   max-width: 1180px;
   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);
}

.st-main form {
   display: flex;
   flex-direction: column;
   gap: var(--nltm-sp-5);
}

.st-card { padding: var(--nltm-sp-5); }

.st-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);
}

.st-help {
   color: var(--nltm-muted);
   font-size: var(--nltm-fs-2);
   margin: var(--nltm-sp-3) 0 0;
}
.st-help code {
   font-family: var(--nltm-font-mono);
   font-size: 0.95em;
   background: var(--nltm-surface-2);
   border: 1px solid var(--nltm-line);
   border-radius: var(--nltm-radius-sm);
   padding: 0.05em 0.4em;
   color: var(--nltm-ink);
}

/* ---------- Textareas ---------- */

.st-textarea {
   width: 100%;
   box-sizing: border-box;
   font-family: var(--nltm-font-mono);
   font-size: var(--nltm-fs-2);
   resize: vertical;
}

/* ---------- Controls rows ---------- */

.st-controls {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   gap: var(--nltm-sp-4);
   margin-top: var(--nltm-sp-4);
}

.st-field {
   display: inline-flex;
   align-items: center;
   gap: var(--nltm-sp-2);
   font-size: var(--nltm-fs-2);
   color: var(--nltm-ink);
}
.st-select { padding: var(--nltm-sp-1) var(--nltm-sp-2); }

/* ---------- Samples ---------- */

.st-samples {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   gap: var(--nltm-sp-3);
   margin-top: var(--nltm-sp-4);
}
.st-samples-label {
   font-family: var(--nltm-font-display);
   font-style: italic;
   color: var(--nltm-muted);
}

/* Soft surface variant of .nltm-button (samples, copy, clear) */
.st-sample-btn {
   background: var(--nltm-surface);
   color: var(--nltm-primary-deep);
   border: 1px solid var(--nltm-line);
   box-shadow: var(--nltm-shadow-1);
}
.st-sample-btn:hover { background: var(--nltm-accent-soft); color: var(--nltm-primary-deep); }

/* ---------- Next Up field ---------- */

.st-nextup {
   display: flex;
   align-items: center;
   gap: var(--nltm-sp-2);
   margin-top: var(--nltm-sp-3);
   font-size: var(--nltm-fs-2);
}
.st-nextup label {
   font-family: var(--nltm-font-display);
   font-style: italic;
   color: var(--nltm-muted);
}
#txtNextUp {
   flex: 1 1 220px;
   font-family: var(--nltm-font-mono);
}

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

.st-output-head {
   display: flex;
   align-items: baseline;
   justify-content: space-between;
   gap: var(--nltm-sp-3);
   flex-wrap: wrap;
}
.st-output-head .st-heading { margin-bottom: 0; }

/* ---------- Key / Value mapping grid ---------- */

.st-map-grid {
   display: flex;
   flex-wrap: wrap;
   gap: var(--nltm-sp-5);
   margin-top: var(--nltm-sp-4);
}
.st-map-col {
   flex: 1 1 300px;
   min-width: 240px;
   display: flex;
   flex-direction: column;
   gap: var(--nltm-sp-2);
}
.st-map-head {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: var(--nltm-sp-3);
}
.st-map-label {
   font-family: var(--nltm-font-display);
   font-style: italic;
   font-weight: 600;
   color: var(--nltm-primary-deep);
}
.st-listbox {
   width: 100%;
   box-sizing: border-box;
   background: var(--nltm-surface);
   color: var(--nltm-ink);
   border: 1px solid var(--nltm-line);
   border-radius: var(--nltm-radius-sm);
   box-shadow: var(--nltm-shadow-1) inset;
   font-family: var(--nltm-font-mono);
   font-size: var(--nltm-fs-1);
   padding: var(--nltm-sp-1);
}
.st-listbox option { padding: 1px var(--nltm-sp-1); }

/* ---------- Mobile ---------- */

@media (max-width: 640px) {
   .st-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); }
}