/* Palette: ink-on-parchment with a single archival blue. The subject is a government
   enumeration, so the page leans documentary rather than playful — the surprise lives in
   the numbers, not the decoration. */
:root{
  --bg:#f6f4ef; --card:#fff; --line:#e2ded4; --ink:#1f2a44; --soft:#5d6577; --faint:#8b8f9c;
  --accent:#1d4ed8; --rare:#b45309; --rare-bg:#fdf3e3;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  --radius:12px;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#14161c; --card:#1c1f28; --line:#2c303b; --ink:#eceef4; --soft:#a3aab9; --faint:#7d8494;
  --accent:#7ea2ff; --rare:#e9a13b; --rare-bg:#2a2113;
}}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased}
.wrap{max-width:660px;margin:0 auto;padding:0 1.25rem}
header.site{padding:2.5rem 0 1rem}
h1{font-family:var(--serif);font-size:2.3rem;line-height:1.15;margin:0 0 .5rem;text-wrap:balance;font-weight:600}
.lede{color:var(--soft);margin:0 0 1.75rem;font-size:1.05rem}
.search{display:flex;gap:.5rem;flex-wrap:wrap;align-items:flex-end}
.btn{font:inherit;font-weight:600;padding:.75rem 1.1rem;border-radius:10px;border:2px solid transparent;background:var(--accent);color:#fff;cursor:pointer}
.btn:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.btn.ghost{background:transparent;border-color:var(--line);color:var(--ink)}
#result{margin:1.5rem 0 0;display:flex;flex-direction:column;gap:1rem}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:1.3rem 1.4rem;font-variant-numeric:tabular-nums}
.name{font-family:var(--serif);font-size:1.9rem;line-height:1.1;margin:0 0 .15rem;word-break:break-word}
.kind{font-size:.78rem;letter-spacing:.09em;text-transform:uppercase;color:var(--faint);font-weight:600}
.big{font-size:2.4rem;font-weight:600;line-height:1;letter-spacing:-.02em;margin:.6rem 0 .1rem}
.big.rare{color:var(--rare)}
.sub{color:var(--soft)}
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(9rem,1fr));gap:.9rem;margin-top:1.1rem;padding-top:1.1rem;border-top:1px solid var(--line)}
.fact-k{font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);font-weight:600}
.fact-v{font-size:1.15rem;font-weight:600}
.share{margin-top:1.1rem;display:flex;gap:.55rem;flex-wrap:wrap;align-items:center}
pre.card-text{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.92rem;line-height:1.55;white-space:pre-wrap;
  background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:.85rem 1rem;margin:0 0 .8rem;overflow-x:auto}
.rare-box{background:var(--rare-bg);border-radius:10px;padding:.8rem 1rem;font-size:.95rem}
.note{font-size:.87rem;color:var(--soft)}
footer.site{margin:3rem 0 4rem;padding-top:1.25rem;border-top:1px solid var(--line);font-size:.87rem;color:var(--faint)}
.examples{margin:.9rem 0 0;font-size:.9rem;color:var(--soft)}
.examples button{font:inherit;background:none;border:none;color:var(--accent);cursor:pointer;padding:0 .15rem;text-decoration:underline}
.toast{position:fixed;left:50%;bottom:1.4rem;transform:translate(-50%,1rem);background:var(--ink);color:var(--bg);
  padding:.6rem 1rem;border-radius:999px;font-size:.9rem;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;z-index:60}
.toast.show{opacity:1;transform:translate(-50%,0)}
@media (prefers-reduced-motion:reduce){.toast{transition:none}}

/* Births-per-year sparkline. Sparse series: withheld years are absent and the line spans
   the gap rather than dipping to zero, which would draw a decline that never happened. */
.trend{margin-top:1.1rem;padding-top:1.1rem;border-top:1px solid var(--line)}
.spark{display:block;width:100%;height:90px;margin:.5rem 0 .1rem}
.spark-line{fill:none;stroke:var(--accent);stroke-width:2;vector-effect:non-scaling-stroke;stroke-linejoin:round}
.spark-fill{fill:var(--accent);opacity:.12;stroke:none}
.spark-peak{fill:var(--accent);stroke:var(--card);stroke-width:2;vector-effect:non-scaling-stroke}
.spark-axis{display:flex;justify-content:space-between;font-size:.75rem;color:var(--faint);font-variant-numeric:tabular-nums}
.down{color:var(--rare);font-size:.85rem;font-weight:600}

/* Two-field search. Labels are visible rather than placeholder-only — a placeholder
   disappears the moment someone types, which is exactly when they need to know which
   box they are in. */
.field{display:flex;flex-direction:column;gap:.3rem;flex:1 1 18rem}
.field-l{font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);font-weight:600}
.field input{width:100%;font:inherit;padding:.75rem .9rem;border:2px solid var(--line);border-radius:10px;background:var(--card);color:var(--ink)}
.field input:focus{outline:none;border-color:var(--accent)}

/* Segmented control — only rendered when both names resolve, so it never appears as a
   dead control with one option. */
.seg{display:inline-flex;border:1px solid var(--line);border-radius:999px;overflow:hidden;margin-bottom:.25rem}
.seg button{font:inherit;font-size:.88rem;font-weight:600;padding:.4rem .95rem;border:none;background:transparent;color:var(--soft);cursor:pointer}
.seg button[aria-pressed="true"]{background:var(--accent);color:#fff}
.seg button:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.pairnote{font-size:.87rem;color:var(--soft);background:var(--rare-bg);border-radius:10px;padding:.7rem .9rem;margin:.2rem 0 0}

/* Disambiguation prompt — shown only when a single word exists in BOTH datasets, so it
   never asks a question the data already answers. */
.ask{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;margin-top:.9rem}
.ask .btn{padding:.55rem 1rem}
.err{border-left:3px solid var(--rare)}

/* ---- multi-page chrome ---------------------------------------------------------------- */
.topnav{border-bottom:1px solid var(--line);background:var(--card)}
/* One row, never wrapping. Short labels do most of the work — the six were 808px of text
   against about 350px of usable phone width — and horizontal scroll is the safety net for the
   narrowest screens and for anyone running large text, where "fits" stops being true. */
.topnav .wrap{
  display:flex;gap:.75rem;flex-wrap:nowrap;align-items:center;
  padding-top:.6rem;padding-bottom:.6rem;font-size:.92rem;
  overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;
  overscroll-behavior-x:contain;
}
.topnav .wrap::-webkit-scrollbar{display:none}
.topnav a{flex:none;white-space:nowrap}
.topnav a{color:var(--soft);text-decoration:none;font-weight:600}
.topnav a:hover{color:var(--ink)}
.topnav a.on{color:var(--accent)}
/* The lookup is the product; the rest is reading matter. It gets the button treatment and
   sits behind a rule so the two groups read as different kinds of thing rather than as five
   equal tabs. */
.topnav .brandlink{
  color:#fff;background:var(--accent);padding:.4rem .85rem;border-radius:999px;
  margin-right:.35rem;display:inline-flex;align-items:center;gap:.4rem;
}
.topnav .brandlink:hover{color:#fff;filter:brightness(1.08)}
.topnav .brandlink::before{content:"🔎";font-size:.95em}
.topnav .sep{align-self:stretch;width:1px;background:var(--line);margin:0 .5rem}
@media (max-width:560px){ .topnav .sep{display:none} }
.page-head{padding:2.5rem 0 .5rem}
.page-head h1{margin-bottom:.5rem}
.prose h2{font-family:var(--serif);font-size:1.35rem;margin:2rem 0 .5rem;font-weight:600}
.prose p{margin:0 0 .9rem;max-width:62ch}
.prose ul{max-width:62ch}
section{margin-bottom:1.5rem}
section h2{font-family:var(--serif);font-size:1.35rem;margin:2rem 0 .6rem;font-weight:600}

/* Rank tables scroll inside their own container so the page body never moves sideways. */
.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);border-radius:var(--radius);background:var(--card)}
table.rank{border-collapse:collapse;width:100%;font-size:.93rem;font-variant-numeric:tabular-nums}
table.rank th,table.rank td{padding:.5rem .7rem;text-align:left;border-bottom:1px solid var(--line);white-space:nowrap}
table.rank thead th{font-size:.72rem;letter-spacing:.07em;text-transform:uppercase;color:var(--faint);font-weight:600;position:sticky;top:0;background:var(--card)}
table.rank tbody tr:last-child th,table.rank tbody tr:last-child td{border-bottom:none}
table.rank tbody th{font-weight:600}
table.rank .num{text-align:right}
table.rank .rk{color:var(--faint);width:2.5rem}
table.rank .bar{width:11rem;min-width:9rem}
table.rank .lead{color:var(--soft)}
.dim{color:var(--faint);font-weight:400}

/* Composition bar. Hues are distinct in both themes and each segment is labelled in the
   aria-label, so the bar is never the only carrier of meaning. */
.cbar{display:flex;height:9px;width:100%;border-radius:999px;overflow:hidden;background:var(--line)}
.cseg{display:block;height:100%}
.cseg-white{background:#6b7fa8}
.cseg-black{background:#b4694a}
.cseg-hispanic{background:#c9a227}
.cseg-asian{background:#4e8c72}
.cseg-native{background:#8a6ea8}
.cseg-multi{background:#8b8f9c}

/* ---- state cards --------------------------------------------------------------------
   Built for a phone first. The previous version was a three-column table whose cells held
   comma-separated lists; on a narrow screen that is a horizontal scroll with nothing but
   truncated text visible, which is the worst of both layouts. One card per state stacks
   naturally and needs no sideways movement at any width. */
.jump{margin:1.2rem 0 .4rem;max-width:22rem}
.jump select{width:100%;font:inherit;padding:.7rem .8rem;border:2px solid var(--line);
  border-radius:10px;background:var(--card);color:var(--ink)}
.jump select:focus{outline:none;border-color:var(--accent)}

.state-grid{display:grid;grid-template-columns:1fr;gap:.9rem;margin:1rem 0 2rem}
@media (min-width:640px){ .state-grid{grid-template-columns:repeat(2,1fr)} }
@media (min-width:1000px){ .state-grid{grid-template-columns:repeat(3,1fr)} }

.state-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:1rem 1.1rem;display:flex;flex-direction:column;gap:.85rem;scroll-margin-top:5rem}
.state-card > header{display:flex;justify-content:space-between;align-items:baseline;gap:.6rem;
  flex-wrap:wrap;margin:0;padding:0}
.state-card h2{font-family:var(--serif);font-size:1.15rem;margin:0;font-weight:600}
.state-card .dim{font-size:.8rem;font-variant-numeric:tabular-nums}
.sc-block{display:flex;flex-direction:column;gap:.3rem}
.namelist{margin:0;font-size:.95rem;line-height:1.5}
.liftlist{list-style:none;margin:0;padding:0;font-variant-numeric:tabular-nums}
.liftlist li{display:flex;justify-content:space-between;gap:.8rem;align-items:baseline;
  padding:.22rem 0;border-bottom:1px solid var(--line);font-size:.95rem}
.liftlist li:last-child{border-bottom:none}
.liftlist b{color:var(--accent);font-weight:600;font-size:.88rem;white-space:nowrap}
.state-card:target{border-color:var(--accent);box-shadow:0 0 0 3px rgba(29,78,216,.12)}

/* ---- tables become cards on a phone ---------------------------------------------------
   A five-column table inside an overflow container does not break the page, but on a 390px
   screen it needs ~200px of sideways scrolling to read one row, which is not a design so
   much as a containment. Below 640px each row restacks into a labelled card. The labels come
   from data-l on each cell, so the markup carries them once and the header row is simply
   hidden rather than duplicated. */
@media (max-width: 640px) {
  .tablewrap { border: none; background: none; overflow-x: visible; }
  table.rank, table.rank tbody, table.rank tr, table.rank th, table.rank td { display: block; width: auto; }
  table.rank thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  table.rank tr {
    background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
    padding: .85rem 1rem; margin-bottom: .7rem;
  }
  table.rank tbody th[scope="row"] {
    font-family: var(--serif); font-size: 1.15rem; font-weight: 600;
    border-bottom: 1px solid var(--line); padding: 0 0 .5rem; margin-bottom: .5rem; white-space: normal;
  }
  table.rank td {
    display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
    padding: .28rem 0; border-bottom: none; white-space: normal; text-align: left;
  }
  table.rank td::before {
    content: attr(data-l); color: var(--faint); font-size: .74rem; letter-spacing: .07em;
    text-transform: uppercase; font-weight: 600; flex: none;
  }
  table.rank td.num { text-align: right; }
  /* The composition bar wants the full width, so it drops below its label rather than
     fighting for room beside it. */
  /* The desktop rule pins .bar to 11rem, which at this width leaves the bar a stub in a
     full-width card. Reset it rather than leaving the two rules to fight. */
  table.rank td.bar { display: block; width: auto; min-width: 0; }
  table.rank td.bar::before { display: block; margin-bottom: .3rem; }
  table.rank td.bar .cbar { width: 100%; }
  table.rank .rk { color: var(--faint); }
}

/* Nav links were 24px tall — under any reasonable touch target. Padding rather than a height
   so the text stays put and only the hit area grows. */
.topnav .wrap { gap: .25rem 1rem; }
.topnav a { padding: .45rem .1rem; display: inline-block; }
@media (max-width: 640px) {
  .topnav a { padding: .5rem .3rem; }
  .topnav .brandlink { padding: .5rem .85rem; }
  /* A fade at the right edge is the only affordance a scroll strip gets, and it must not
     appear when there is nothing to scroll to. */
  .topnav { position: relative; }
  .topnav::after { content:""; position:absolute; top:0; right:0; bottom:0; width:26px;
    pointer-events:none; background:linear-gradient(90deg, transparent, var(--card)); }
}

/* The inline example links are real buttons and were 24px tall — fine for a cursor, not for
   a thumb. Padding grows the hit area without moving the text off the baseline. */
.examples button { padding: .35rem .2rem; line-height: 1.5; }
@media (max-width: 640px) {
  .examples { line-height: 2.1; }
  .examples button { padding: .45rem .3rem; }
  /* Three rows of nav on a phone is a lot of screen before any content. Tighten it. */
  .page-head { padding-top: 1.6rem; }
}