/* ============================================================
   Transform Text — tool-local layout.
   Pairs with the shared theme (../Shared/theme.css); every
   color/space comes from a --nltm-* token.
   ============================================================ */

/* Per-sample caption — a thin accent line just under the header bar. */
.tt-sample-caption {
   margin: var(--nltm-sp-3) 0 0;
}
.tt-sample-caption:empty { display: none; }

/* ---- Workspace: editor on the left, transform palette on the right ----
   Flex (not grid) so the editor's width is driven by the textarea: dragging
   the textarea wider grows the editor and squeezes the palette, which reflows
   from masonry columns down to a single vertical column. */
.tt-workspace {
   display: flex;
   gap: var(--nltm-sp-5);
   align-items: flex-start;
   margin-top: var(--nltm-sp-5);
}

/* Editor sizes to its textarea and stays in view while the palette scrolls. */
.tt-editor {
   position: sticky;
   top: var(--nltm-sp-4);
   flex: 0 0 auto;
   min-width: 0;
}
.tt-editor .nltm-card { width: max-content; max-width: 100%; }

.tt-editor-head {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: var(--nltm-sp-3);
   margin-bottom: var(--nltm-sp-3);
}
.tt-editor-head .tt-card-title { margin: 0; }

/* Working text area (input == output; transforms apply in place).
   resize: both lets the user drag it wider into the palette space (and taller);
   the clamp is just the default size before any drag. */
.tt-textarea {
   display: block;
   width: clamp(320px, 44vw, 760px);
   box-sizing: border-box;
   min-height: 58vh;
   font-family: var(--nltm-font-mono);
   font-size: var(--nltm-fs-2);
   line-height: var(--nltm-lh-base);
   white-space: pre;
   resize: both;
}

/* ---- Palette: masonry-style column packing (no equal-height voids) ----
   flex:1 with min-width:0 so it yields width to a widening editor, dropping
   from several columns down to a single vertical column. */
.tt-palette {
   flex: 1 1 0;
   min-width: 0;
   column-width: 232px;
   column-gap: var(--nltm-sp-4);
}
.tt-palette .nltm-card {
   break-inside: avoid;
   -webkit-column-break-inside: avoid;
   page-break-inside: avoid;
   margin: 0 0 var(--nltm-sp-4);
   padding: var(--nltm-sp-4);
}

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

/* Button cluster inside a card — compact so the palette stays scannable */
.tt-buttons {
   display: flex;
   flex-wrap: wrap;
   gap: var(--nltm-sp-2);
}
.tt-palette .nltm-button {
   font-size: var(--nltm-fs-1);
   padding: var(--nltm-sp-2) var(--nltm-sp-3);
}

/* Parameter row: small labelled inputs sharing a card with their buttons.
   NOT .nltm-check — that class shrinks nested inputs to checkbox size. */
.tt-params {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   gap: var(--nltm-sp-2);
   margin-top: var(--nltm-sp-3);
   font-size: var(--nltm-fs-1);
   color: var(--nltm-muted);
}
.tt-params + .tt-buttons { margin-top: var(--nltm-sp-3); }

.tt-param {
   width: 4ch;
   text-align: center;
   padding: var(--nltm-sp-1) var(--nltm-sp-2);
}
.tt-param-wide {
   width: 8ch;
   text-align: center;
   padding: var(--nltm-sp-1) var(--nltm-sp-2);
}

/* ---- Narrow / mobile: single column, editor no longer sticky ---- */
@media (max-width: 860px) {
   .tt-workspace { flex-direction: column; }
   .tt-editor { position: static; width: 100%; }
   .tt-editor .nltm-card { width: auto; }
   .tt-textarea { width: 100%; min-height: 40vh; }
   .tt-palette { width: 100%; }
}