/* Name generator: flat WFG addon frames; the generated identity leads the page. */
.ng-page { padding-bottom: var(--s-7); }
.ng-tool { min-width: 0; }
.ng-tool [hidden] { display: none !important; }
.ng-workspace { display: grid; grid-template-columns: minmax(0, 1fr); border: 1px solid var(--edge); box-shadow: inset 0 0 0 1px var(--edge-inner); background: var(--bg-2); }
.ng-form, .ng-current { min-width: 0; padding: var(--s-4); }
.ng-form { border-bottom: 1px solid var(--edge-inner); }
.ng-selects { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); }
.ng-tool label { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-1); font: 400 .95rem/1.3 var(--font-ui); color: var(--ink-2); min-width: 0; }
.ng-tool select, .ng-tool input, .ng-tool textarea { width: 100%; min-width: 0; min-height: 44px; padding: .5rem .55rem; border: 1px solid var(--line-control); border-radius: var(--r-ctl); background: var(--bg); color: var(--ink); font: 400 1rem/1.3 var(--font-ui); }
.ng-tool textarea { resize: vertical; }
.ng-tool input::placeholder { color: var(--ink-3); }
.ng-tool .wfg-btn { min-height: 44px; white-space: normal; overflow-wrap: anywhere; }
.ng-tool .wfg-btn:disabled, .ng-tool .wfg-btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.ng-style-note { margin: var(--s-2) 0 var(--s-3); color: var(--ink-3); font: 400 .85rem/1.4 var(--font-ui); }
.ng-generate { width: 100%; }
.ng-custom { margin-top: var(--s-2); }
.ng-tool summary { min-height: 44px; padding-block: .65rem; cursor: pointer; color: var(--ink-2); font: 400 .95rem/1.3 var(--font-ui); overflow-wrap: anywhere; }
.ng-custom-body { padding-top: var(--s-2); }
.ng-custom-body > p:first-child { margin: 0 0 var(--s-3); font-size: .9rem; color: var(--ink-2); }
.ng-custom-body .wfg-btn { margin-top: var(--s-2); }
.ng-current h2 { margin: 0; font: 400 1.35rem/1.1 var(--font-display); color: var(--ink-2); }
.ng-name { margin: var(--s-2) 0; color: var(--accent-text); font: 400 clamp(2.2rem, 5vw, 3rem)/1.05 var(--font-display); overflow-wrap: anywhere; user-select: text; }
.ng-counts { margin: 0 0 var(--s-3); color: var(--ink-3); font: 400 .85rem/1.4 var(--font-ui); }
.ng-rerolls, .ng-result-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2); }
.ng-result-actions { margin-top: var(--s-2); }
.ng-check { margin: var(--s-3) 0 var(--s-1); color: var(--ink-2); font-size: .88rem; line-height: 1.45; }
.ng-note { color: var(--ink-3); font-size: .82rem; line-height: 1.5; margin: var(--s-2) 0 0; overflow-wrap: anywhere; }
.ng-limits { margin-top: 0; }
.ng-limits a { display: inline-block; min-height: 28px; padding-block: .2rem; }
.ng-check-details { margin-top: var(--s-1); }
.ng-check-details summary { font-size: .85rem; }
.ng-check-details p, .ng-check-details ul { font-size: .85rem; line-height: 1.5; color: var(--ink-2); margin: var(--s-2) 0; }
.ng-check-details ul { padding-left: 1.2rem; }
.ng-form-error, .ng-custom-feedback { color: var(--ink); font-size: .9rem; line-height: 1.5; border: 1px solid var(--line-control); padding: var(--s-2); margin: var(--s-2) 0; }
.ng-copy-fallback { padding-top: var(--s-3); }
.ng-status { min-height: 1.5em; margin: var(--s-2) 0 var(--s-3); color: var(--ink-2); font: 400 .88rem/1.5 var(--font-ui); overflow-wrap: anywhere; }
.ng-section-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); margin-bottom: var(--s-2); }
.ng-section-head h2 { margin: 0; font: 400 1.65rem/1.1 var(--font-display); }
.ng-list, .ng-history-list { list-style: none; padding: 0; margin: 0; }
.ng-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-2); }
.ng-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-2); align-items: center; background: var(--bg-2); border: 1px solid var(--edge); box-shadow: inset 0 0 0 1px var(--edge-inner); padding: var(--s-2) var(--s-3); min-width: 0; }
.ng-row-name { font: 400 1.55rem/1.15 var(--font-display); color: var(--ink); overflow-wrap: anywhere; margin: 0; }
.ng-row-actions { display: flex; flex-wrap: wrap; gap: var(--s-1); }
.ng-row-actions .wfg-btn { font-size: .88rem; padding-inline: .6rem; }
.ng-row-meta { display: block; font: 400 .8rem/1.4 var(--font-ui); color: var(--ink-3); margin-top: var(--s-1); }
.ng-library { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-2); margin-top: var(--s-4); }
.ng-library-section { border: 1px solid var(--edge); box-shadow: inset 0 0 0 1px var(--edge-inner); background: var(--bg-2); padding-inline: var(--s-3); min-width: 0; }
.ng-library-section > summary { padding-block: .8rem; color: var(--ink); }
.ng-total { color: var(--ink-3); margin-left: var(--s-2); }
.ng-library-body { padding-bottom: var(--s-3); }
.ng-empty { margin: var(--s-2) 0; color: var(--ink-3); font-size: .9rem; }
.ng-history-item { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-2); padding-block: var(--s-2); border-top: 1px solid var(--edge-inner); }
.ng-history-label { min-width: 0; overflow-wrap: anywhere; font: 400 .95rem/1.4 var(--font-ui); color: var(--ink-2); }
.ng-history-label small { display: block; font-size: .8rem; color: var(--ink-3); }
.ng-guide { margin-top: var(--s-6); }
.ng-noscript { padding: var(--s-3); border: 1px solid var(--line-control); font-size: .95rem; }
@media (min-width: 48rem) {
  @container page (width >= 47rem) {
    .ng-workspace { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
    .ng-form { border-bottom: 0; border-right: 1px solid var(--edge-inner); }
    .ng-form, .ng-current { padding: var(--s-5); }
    .ng-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ng-library .ng-list { grid-template-columns: minmax(0, 1fr); }
    .ng-library { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  }
}
@container page (width < 30rem) {
  .ng-row { grid-template-columns: minmax(0, 1fr); }
  .ng-row-actions { justify-content: flex-start; }
}
@container page (width < 20rem) {
  .ng-selects, .ng-rerolls, .ng-result-actions { grid-template-columns: minmax(0, 1fr); }
  .ng-section-head { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) { .ng-tool * { transition: none; animation: none; } }