/* Shared styling for /name-generators/ pages.
   Scoped under .ng- so it cannot collide with the tool templates. */

.ng-wrap{max-width:1000px;margin:0 auto;padding:1.5rem 1rem 3rem;box-sizing:border-box}

.ng-head h1{font-size:2rem;line-height:1.2;margin:0 0 .5rem}
.ng-sub{margin:0 0 1.5rem;color:#5b5870;font-size:1.02rem;max-width:64ch}

/* ---------------------------------------------------------------- the tool */
.ng-tool{border:1px solid #e3e1ec;border-radius:14px;padding:1.25rem;background:#fff;margin-bottom:2rem}
.ng-controls{display:flex;flex-wrap:wrap;gap:.75rem;align-items:flex-end}
.ng-field{display:flex;flex-direction:column;gap:.3rem;flex:1 1 170px;min-width:0}
.ng-field--narrow{flex:0 1 110px}
.ng-field span{font-size:.8rem;font-weight:600;letter-spacing:.03em;text-transform:uppercase;color:#6b6880}
.ng-field select{width:100%;box-sizing:border-box;padding:.6rem .7rem;border:1px solid #d8d5e2;border-radius:8px;font:inherit;font-size:.95rem;background:#fff;color:#14141f}
.ng-field select:focus{outline:none;border-color:#216be9;box-shadow:0 0 0 3px rgba(33,107,233,.13)}

.ng-btn{padding:.65rem 1.15rem;border:0;border-radius:8px;background:#216be9;color:#fff;font:inherit;font-weight:600;cursor:pointer;flex:0 0 auto}
.ng-btn:hover{background:#1a57bd}
.ng-btn--ghost{background:#f0eff4;color:#33313f}
.ng-btn--ghost:hover{background:#e4e2ec}

.ng-note{margin:1rem 0 .5rem;font-size:.9rem;color:#6b6880;line-height:1.5}

.ng-results{list-style:none;margin:.5rem 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:.5rem}
.ng-results li{display:flex;align-items:center;gap:.5rem;padding:.55rem .7rem;border:1px solid #eceaf2;border-radius:8px;background:#fbfbfd;min-width:0}
.ng-name{font-weight:600;color:#14141f;overflow-wrap:break-word;white-space:normal;flex:1 1 auto;min-width:0}
.ng-gloss{font-size:.72rem;color:#6b6880;font-style:italic;flex:0 0 auto}
.ng-race{font-size:.68rem;color:#216be9;background:#e9f0fe;border-radius:999px;padding:.15em .55em;flex:0 0 auto}
/* min-width is sized for the longest label the button ever shows ("Copied").
   Without it the label swap widens the button, which squeezes the name, which
   wraps it to a second line and makes the whole row jump taller on click. */
.ng-copy{flex:0 0 auto;border:0;background:transparent;color:#216be9;font:inherit;font-size:.8rem;cursor:pointer;padding:.15rem .35rem;border-radius:5px;min-width:4.6em;text-align:center}
.ng-copy:hover{background:#e9f0fe}

/* Rows whose gloss is a full sentence rather than a one-word translation.
   The D&D generators gloss an Elvish surname ("Silverfrond") and fit on one
   line; the city generator glosses the whole name ("the river crossing where
   the ash trees grow") and cannot. Left unscoped, the non-shrinking gloss
   pushed the Copy button 34px outside its own row and past the viewport at
   390px, where it was clipped and unclickable. Here the gloss takes its own
   full-width line and the button stays inside the row. */
.ng-results--glossed li{flex-wrap:wrap}
.ng-results--glossed .ng-gloss{flex:1 1 100%;order:3;min-width:0;overflow-wrap:break-word;margin-top:.15rem}
.ng-results--glossed .ng-copy{order:2;margin-left:auto}
.ng-results--glossed .ng-race{order:4}

.ng-actions{display:flex;align-items:center;justify-content:center;gap:.9rem;margin-top:1.4rem;flex-wrap:wrap}
/* Wider than the controls-row buttons: these are the two actions a visitor takes
   after reading the list, so they get horizontal weight without growing taller. */
.ng-actions .ng-btn{padding-left:2.4rem;padding-right:2.4rem}
.ng-status{font-size:.85rem;color:#6b6880;flex-basis:100%;text-align:center;margin-top:.15rem}

/* ---------------------------------------------------------------- the body */
.ng-body h2{font-size:1.35rem;margin:2.2rem 0 .7rem;line-height:1.3}
.ng-body h3{font-size:1.05rem;margin:1.5rem 0 .4rem}
.ng-body p{line-height:1.65;margin:0 0 .9rem;max-width:70ch}
.ng-body ul{line-height:1.65;max-width:70ch}
.ng-body li{margin-bottom:.4rem}

.ng-table-wrap{overflow-x:auto;max-width:100%;-webkit-overflow-scrolling:touch;margin:1rem 0 1.5rem}
.ng-table{border-collapse:collapse;width:100%;min-width:520px;font-size:.93rem}
.ng-table th,.ng-table td{text-align:left;padding:.6rem .8rem;border-bottom:1px solid #eceaf2;vertical-align:top}
.ng-table th{background:#fbfbfd;font-weight:700;color:#33313f}

.ng-links{list-style:none;padding:0}
.ng-links li{margin-bottom:.5rem}
.ng-links a{color:#216be9;font-weight:600;text-decoration:none}
.ng-links a:hover{text-decoration:underline}

/* -------------------------------------------------------------- the phone */
@media (max-width:600px){
  .ng-wrap{padding:1rem .9rem 2.5rem}
  .ng-head h1{font-size:1.5rem}
  .ng-tool{padding:1rem}
  .ng-field{flex:1 1 100%}
  .ng-field--narrow{flex:1 1 100%}
  .ng-btn{width:100%}
  .ng-results{grid-template-columns:1fr}
  .ng-body h2{font-size:1.2rem}
}

/* Figures. Real image files, never inline SVG (IZ-1). They carry their own dark
   ground because this site has a light/dark toggle and a raster cannot adapt. */
.ng-fig{margin:1.8em 0;padding:0}
.ng-fig img{display:block;width:100%;height:auto;border-radius:12px;border:1px solid #e3e1ec}
.ng-fig figcaption{margin-top:.6em;font-size:.88rem;color:#6b6880;line-height:1.5}
.ng-caption{caption-side:top;text-align:left;font-size:.88rem;color:#6b6880;padding-bottom:.6em}
.ng-table--d66{font-size:.88rem;min-width:620px}
.ng-roll{font-variant-numeric:tabular-nums;color:#6b6880;font-weight:700;width:3.2em}
.ng-race-cell{color:#6b6880;font-size:.85em;white-space:nowrap}

/* "None published" in the meaning column of the D&D sample table. It is the
   argument of that section rather than a blank cell, so it is rendered as text
   and muted rather than left empty and read as a rendering fault. */
.ng-none{color:#8b8899;font-style:italic}