/* /names pages. Colors for the chart lines follow app.css's light/dark tokens. */
:root { --girl: #c2410c; --boy: #0f766e; --c-us: #c2410c; --c-ew: #1d4ed8; --c-sc: #0f766e; --c-ni: #7c3aed; --c-fr: #be185d; --c-bln: #a16207; --c-it: #15803d; }
@media (prefers-color-scheme: dark) {
  :root { --girl: #fb923c; --boy: #2dd4bf; --c-us: #fb923c; --c-ew: #60a5fa; --c-sc: #2dd4bf; --c-ni: #c4b5fd; --c-fr: #f472b6; --c-bln: #facc15; --c-it: #4ade80; }
}

.h2 { font-size: 1.1rem; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.label { display: block; font-weight: 600; font-size: .9rem; margin: 0 0 6px; }

.name-title { font-size: clamp(2.2rem, 10vw, 3.4rem); letter-spacing: -.03em; }

.name-chart { display: block; width: 100%; height: auto; margin: 4px 0 8px; }
.nc-line { fill: none; stroke-width: 2.5; stroke-linejoin: round; }
.nc-line.nc-f { stroke: var(--girl); }
.nc-line.nc-m { stroke: var(--boy); }
.nc-grid { stroke: var(--line); stroke-width: 1; }
.nc-axis { fill: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.name-legend { margin: 0; font-size: .875rem; color: var(--muted); }
.name-legend .key { display: inline-block; width: 14px; height: 4px; border-radius: 2px; vertical-align: middle; margin: 0 6px 0 0; }
.nc-line.nc-us { stroke: var(--c-us); }
.nc-line.nc-sample { stroke-dasharray: 5 4; stroke-width: 2; }
.nc-line.nc-ew { stroke: var(--c-ew); }
.nc-line.nc-sc { stroke: var(--c-sc); }
.nc-line.nc-ni { stroke: var(--c-ni); }
.nc-line.nc-fr { stroke: var(--c-fr); }
.nc-line.nc-bln { stroke: var(--c-bln); }
.nc-line.nc-it { stroke: var(--c-it); }
.key { display: inline-block; width: 14px; height: 4px; border-radius: 2px; vertical-align: middle; margin: 0 6px 0 0; }
.name-legend .key ~ .key { margin-left: 10px; }
.key.nc-us { background: var(--c-us); }
.key.nc-ew { background: var(--c-ew); }
.key.nc-sc { background: var(--c-sc); }
.key.nc-ni { background: var(--c-ni); }
.key.nc-fr { background: var(--c-fr); }
.key.nc-bln { background: var(--c-bln); }
.key.nc-it { background: var(--c-it); }
.country-table td, .country-table th { white-space: nowrap; }
.country-table td, .country-table th { font-size: .9rem; }
.key.nc-f { background: var(--girl); }
.key.nc-m { background: var(--boy); margin-left: 12px; }
.name-legend .key.nc-m:first-child { margin-left: 0; }

.name-find, .year-find { display: flex; gap: 10px; margin: 0 0 16px; }
.name-find input, .year-find input, .year-find select { flex: 1; min-width: 0; }
.year-find input { flex: 0 0 6.5em; }
.name-find .btn, .year-find .btn { flex: none; }

.year-nav { display: flex; justify-content: space-between; margin: 0 0 12px; font-weight: 600; }
.year-nav a { text-decoration: none; }
.year-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.year-col { padding: 14px; min-width: 0; }
.year-list { list-style: none; margin: 0; padding: 0; font-variant-numeric: tabular-nums; }
.year-list li { display: flex; align-items: baseline; gap: 6px; padding: 4px 0; border-bottom: 1px solid var(--line); }
.year-list li:last-child { border: 0; }
.year-list .rk { flex: none; width: 2em; text-align: right; color: var(--muted); font-size: .8rem; }
.year-list a { flex: 1; min-width: 0; color: var(--ink); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.year-list a:hover { color: var(--accent); }
.year-list .ct { flex: none; color: var(--muted); font-size: .8rem; }
@media (max-width: 520px) {
  .year-col { padding: 10px; }
  .year-list .rk { width: 1.6em; }
  .nc-axis { font-size: 22px; }
  .country-table td, .country-table th { font-size: .8rem; padding: 8px 2px; }
  .country-table .key { width: 10px; margin-right: 4px; }
}

.choices { display: flex; gap: 6px; }
.choices label { flex: 1; margin: 0; }
.choices input { position: absolute; opacity: 0; pointer-events: none; }
.choices span {
  display: block; text-align: center; padding: 9px 4px; border-radius: 9px; border: 1.5px solid var(--line);
  font-weight: 700; font-size: .9rem; cursor: pointer; user-select: none;
}
.choices input:checked + span { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.choices input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }

#results { margin-top: 18px; }
.maker-list { list-style: none; padding: 0; margin: 0 0 12px; }
.maker-list li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 1.1rem; }
.maker-list li:last-child { border: 0; }
.maker-list a { color: var(--ink); font-weight: 700; text-decoration: none; }
.maker-list a:hover { color: var(--accent); }

.names-source { margin-top: 24px; }

/* Number cards: smaller than the tracker's, and never break a number in two. */
.stats .stat b { font-size: clamp(1.35rem, 5.2vw, 1.9rem); overflow-wrap: normal; white-space: nowrap; }