/* 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}

/* The Orc family checkbox on the Skyrim node. It appears and disappears with the
   race control, so it carries its own row rather than sitting in .ng-controls,
   where a hidden field would leave a gap in the flex row (TT-4). */
.ng-check{display:inline-flex;align-items:center;gap:.5rem;margin:.1rem 0 .9rem;
  font-size:.92rem;color:#4a4860;cursor:pointer}
.ng-check input{width:1rem;height:1rem;accent-color:#3b5bfd;cursor:pointer}

/* Jedi node: the formula tool. Four text inputs plus a privacy statement that
   sits with the inputs rather than in a footer, because the claim it makes is
   about those specific fields. */
.ng-formula-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:.9rem;margin:.2rem 0 1rem}
.ng-formula-grid .ng-field input{width:100%;padding:.55rem .7rem;border:1px solid #e3e1ec;
  border-radius:8px;font-size:.95rem;font-family:inherit;color:#24222e;background:#fff}
.ng-formula-grid .ng-field input:focus{outline:2px solid #3b5bfd;outline-offset:1px;border-color:#3b5bfd}
.ng-privacy{background:#f5f7ff;border:1px solid #dfe4ff;border-left:3px solid #3b5bfd;
  border-radius:8px;padding:.85rem 1rem;font-size:.9rem;line-height:1.55;color:#3c3a4d;margin:0 0 1rem}
.ng-formula-out{background:#f3f9f4;border:1px solid #cfe6d4;border-radius:10px;
  padding:1.1rem 1.2rem;margin-bottom:1rem}
.ng-formula-name{font-size:1.9rem;font-weight:800;color:#1c7c33;letter-spacing:-.4px;line-height:1.2}
.ng-formula-working{font-size:.87rem;color:#5d6b60;margin-top:.5rem;font-style:italic}

/* The Jedi method control sits alone in its row while the formula is showing,
   because the species fields are hidden. Cap it so it does not stretch to fill
   the whole row and read as a broken layout. */
#ngMethod{max-width:22rem}

/* Drow node. The meaning-first selects carry the published glosses as their
   option text ("berserk, berserker, orc, wild"), which is far longer than any
   other control label on the site, so they are capped and allowed to grow
   rather than stretching their row. The lookup field is a plain text input
   inside .ng-controls rather than inside the Jedi formula grid. */
.ng-controls .ng-field input[type="text"]{width:100%;padding:.55rem .7rem;
  border:1px solid #e3e1ec;border-radius:8px;font-size:.95rem;font-family:inherit;
  color:#24222e;background:#fff}
.ng-controls .ng-field input[type="text"]:focus{outline:2px solid #3b5bfd;
  outline-offset:1px;border-color:#3b5bfd}
#ngMeanPrefix,#ngMeanSuffix{max-width:20rem}
#ngLookup{min-width:14rem}