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

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

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

/* The mapping card grows to fit the key it contains: as wide as its widest
   child (the key), never narrower than the normal column, never wider than the
   window. Centred on the page so it can also break out of the 820px column.
   A scrollbar appears only when the key is wider than the window. */
.sm-card-key {
   width: max-content;
   min-width: 100%;
   max-width: 100vw;
   margin-left: 50%;
   transform: translateX(-50%);
   overflow-x: auto;
}
/* Keep prose at a readable measure so it never drives the card's width — only
   the key should. */
.sm-card-key .sm-help { max-width: 72ch; }

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

.sm-help {
   color: var(--nltm-muted);
   font-size: var(--nltm-fs-2);
   margin: 0 0 var(--nltm-sp-3);
}
.sm-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);
}

.sm-input {
   width: 100%;
   box-sizing: border-box;
}

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

/* ---------- Derived key view ---------- */

/* Hidden until a button press populates it (see renderKey()). */
.sm-key:empty { display: none; }

.sm-key {
   display: flex;
   align-items: stretch;
   gap: var(--nltm-sp-2);
   margin-top: var(--nltm-sp-4);
   /* Inset frame hugging the key cells. The card (.sm-card-key) grows to fit
      this and handles any scrolling, so the key itself needs no breakout. */
   width: max-content;
   max-width: 100%;
   padding: var(--nltm-sp-3);
   box-sizing: border-box;
   border: 1px solid var(--nltm-line);
   border-radius: var(--nltm-radius);
   background: var(--nltm-surface-2);
}

/* Shared row rhythm so the label column lines up with each data row. */
.sm-key-label,
.sm-key-cell {
   box-sizing: border-box;
   height: 1.7rem;            /* rem (not em) so every row matches regardless of font-size */
   display: flex;
   align-items: center;
   padding: 0 var(--nltm-sp-1);
   font-size: var(--nltm-fs-1);
}

/* Fixed left column of row labels, aligned to the three cell rows. */
.sm-key-labels {
   display: flex;
   flex-direction: column;
   gap: var(--nltm-sp-1);
   flex: 0 0 auto;
}
.sm-key-label {
   font-size: var(--nltm-fs-1);
   color: var(--nltm-muted);
   font-style: italic;
   white-space: nowrap;
   justify-content: flex-end;
}

/* One column per sentence letter. */
.sm-key-grid {
   display: flex;
   gap: var(--nltm-sp-1);
}
.sm-key-col {
   display: flex;
   flex-direction: column;
   gap: var(--nltm-sp-1);
   flex: 0 0 auto;
   min-width: 1.6rem;
}
.sm-key-cell {
   justify-content: center;
   text-align: center;
   border: 1px solid var(--nltm-line);
   border-radius: var(--nltm-radius-sm);
}

.sm-key-letter {
   font-weight: 600;
   color: var(--nltm-ink);
   background: var(--nltm-surface-2);
}
.sm-key-code {
   font-family: var(--nltm-font-mono);
   color: var(--nltm-muted);
   background: var(--nltm-surface);
}
/* The "maps to" row reads as the answer. */
.sm-key-alpha {
   font-weight: 600;
   color: var(--nltm-primary-deep);
   background: var(--nltm-primary-soft);
}

/* ---------- Controls row ---------- */

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

/* Outlined / "ghost" button variant for Clear + sample buttons */
.sm-ghost-btn {
   background: var(--nltm-surface);
   color: var(--nltm-primary-deep);
   border: 1px solid var(--nltm-line);
   box-shadow: var(--nltm-shadow-1);
}
.sm-ghost-btn:hover { background: var(--nltm-accent-soft); color: var(--nltm-primary-deep); }

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

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

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