/* Nail Shape Chart & Finder — its own styles (the shared ones are core/tools.css). Scoped .chqt-nail*. */
/* the top three: space reserved before the drawing arrives, so nothing below it moves */
.chqt-nail-top { min-height: 150px; }
.chqt-nail-top svg { max-height: 300px; }
/* every shape, ranked: a grid of small cards that fits 390px phones four to a row */
.chqt-nails {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 8px;
  list-style: none; margin: 0; padding: 0; min-height: 150px;
}
.chqt-nails li {
  background: #fff; border: 1px solid var(--chqt-line); border-radius: 10px;
  padding: 6px 4px 8px; text-align: center; line-height: 1.25; min-width: 0;
}
.chqt-nails li[data-rank="1"] { border-color: var(--chqt-accent); box-shadow: inset 0 0 0 1.5px var(--chqt-accent); }
.chqt-nails li[data-out-of] b { color: var(--chqt-muted); }
.chqt-nails svg { display: block; width: 100%; height: auto; max-height: 120px; }
.chqt-nails b { display: block; font-size: 13.5px; margin-top: 4px; }
.chqt-nails small { display: block; font-size: 12.5px; color: var(--chqt-muted); }