/* Pokémon names (public/lib/roster.js monName): the name in the body face, species and types under it,
   smaller, in the mono face. Kept in its own file so the main stylesheet can change around it. */
.mon { display: inline-grid; line-height: 1.2; min-width: 0; vertical-align: top; }
.mon > b { font-family: var(--f-body); font-weight: 600; }
.mon > small { font-family: var(--f-mono); font-size: 11.5px; color: var(--muted); font-weight: 400; }
.was { font-size: 12px; color: var(--muted); }
.why { font-size: 12.5px; font-style: italic; color: var(--muted); }
.naming { display: inline-flex; gap: 6px; align-items: center; font-size: 12.5px; color: var(--muted); }
.naming::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--warn); animation: pulse 1.2s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .naming::before { animation: none; } }
.rename { display: grid; gap: 6px; margin-top: 6px; }
.rename .row { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.rename input { font: inherit; font-size: 14px; font-weight: 600; padding: 4px 8px; border: 1px solid var(--line); border-radius: 4px; background: var(--bg); color: var(--fg); max-width: 14em; }
.rename .count { font-family: var(--f-mono); font-size: 11.5px; color: var(--muted); }
.rename .err { font-size: 12px; color: var(--bad); min-height: 1em; }
.linkbtn { font: inherit; font-size: 12.5px; border: 0; background: none; color: var(--accent); padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.linkbtn:disabled { color: var(--muted); text-decoration: none; cursor: not-allowed; }
.statmods { font-family: var(--f-mono); font-size: 11.5px; color: var(--muted); }
.statmods .up { color: var(--good); }
.statmods .down { color: var(--bad); }