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

.ah-card { padding: var(--nltm-sp-5); }
.ah-card + .ah-card { margin-top: var(--nltm-sp-5); }

/* Section heading inside a card */
.ah-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);
}

/* Card heading row: title left, secondary control (Clear) right */
.ah-cardhead {
   display: flex;
   justify-content: space-between;
   align-items: baseline;
   gap: var(--nltm-sp-3);
   margin-bottom: var(--nltm-sp-3);
}
.ah-cardhead .ah-heading { margin: 0; }

/* Secondary / ghost button (Clear) */
.ah-clear {
   background: var(--nltm-surface);
   color: var(--nltm-primary-deep);
   border: 1px solid var(--nltm-line);
   box-shadow: var(--nltm-shadow-1);
   flex: none;
}
.ah-clear:hover { background: var(--nltm-accent-soft); color: var(--nltm-primary-deep); }

/* A labelled field block: label line + full-width control */
.ah-field { margin: 0 0 var(--nltm-sp-3); }
.ah-field > label {
   display: block;
   margin-bottom: var(--nltm-sp-1);
   font-weight: 500;
   color: var(--nltm-ink);
}

/* Full-width text areas / inputs */
.ah-input {
   width: 100%;
   box-sizing: border-box;
   font-family: var(--nltm-font-mono);
   resize: vertical;
}
/* Read-only output fields get the inset surface tone */
.ah-input[readonly] {
   background: var(--nltm-surface-2);
   color: var(--nltm-muted);
}

/* Row of buttons */
.ah-actions {
   display: flex;
   flex-wrap: wrap;
   gap: var(--nltm-sp-3);
   align-items: center;
   margin-top: var(--nltm-sp-3);
}

/* A label row that carries the collapsible toggles on the right */
.ah-fieldhead {
   display: flex;
   align-items: center;
   gap: var(--nltm-sp-3);
   flex-wrap: wrap;
   margin-bottom: var(--nltm-sp-1);
}
.ah-fieldhead > label {
   font-weight: 500;
   margin-right: auto;
}

/* ---------- Collapsible toggle panels ---------- */

.toggle {
   cursor: pointer;
   display: inline-flex;
   align-items: center;
   gap: var(--nltm-sp-1);
   padding: 0.15em 0.55em;
   border: 1px solid var(--nltm-line);
   border-radius: var(--nltm-radius-sm);
   background: var(--nltm-surface);
   color: var(--nltm-primary-deep);
   font-size: var(--nltm-fs-1);
   user-select: none;
}
.toggle:hover { background: var(--nltm-primary-soft); }
.toggle .arrow { font-size: 0.85em; line-height: 1; }
.toggle .label { font-weight: 500; }

/* The panel revealed by a toggle */
.wordcontent {
   display: none;
   margin: var(--nltm-sp-2) 0 var(--nltm-sp-3);
   padding: var(--nltm-sp-3);
   border: 1px solid var(--nltm-line);
   border-radius: var(--nltm-radius-sm);
   background: var(--nltm-surface-2);
}
.wordcontent > label,
.wordcontent .ah-panel-label {
   display: block;
   margin-bottom: var(--nltm-sp-1);
   color: var(--nltm-muted);
   font-size: var(--nltm-fs-2);
}

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