/* The population catalogue (/populations, src/pages/populations.vue). The
   pages' content is pre-rendered by scripts/entities, which also serves this
   file as /populations/assets/populations.css so the pre-rendered page paints
   styled before the app's bundle arrives; the route imports it for the same
   rules once the app is up. Plain CSS for that reason (no SCSS), scoped under
   .populations-root so nothing leaks into the rest of the app.

   Same surface as the in-app guides (guidesRoot.scss): it follows the app's
   theme, light first and body.dark swapping the set, with the app's neutral
   greys and its standard blue. */

.populations-root {
    color-scheme: light;
    --ink: #212121;
    --ink-dim: #5f5f5f;
    --line: #dedede;
    --line-soft: #e8e8e8;
    --bg: #f5f5f5;
    --bg-raised: #ffffff;
    --bg-sunken: #ebebeb;
    --pill: #ebebeb;
    --accent: #e65929;
    --blue: #2e668c;
    --link: var(--blue);
    --mono: SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    --radius: 10px;

    /* Own the surface, as the guides do: nothing behind it shows through. */
    background: var(--bg);
    min-height: 100vh;
    padding: 90px max(26px, calc((100% - 1180px) / 2)) 120px;
    color: var(--ink);
    font: 400 16px/1.6 Lato, "Helvetica Neue", Arial, sans-serif;
}
body.dark .populations-root {
    color-scheme: dark;
    --ink: #e4e4e4;
    --ink-dim: #9a9a9a;
    --line: #2e2e2e;
    --line-soft: #242424;
    --bg: #181818;
    --bg-raised: #202020;
    --bg-sunken: #141414;
    --pill: #2a2a2a;
    --blue: #5bb8d9;
}

/* A colour per period, oldest green through to the modern app blue, so a
   population's age reads at a glance in every list. Each .era-<key> sets
   --era for whatever it holds (a dot, a card's spine, a timeline segment). */
.populations-root .era-accent { --era: var(--accent); }
.populations-root .era-hunter-gatherer { --era: #2f8a57; }
.populations-root .era-neolithic { --era: #7c8c1c; }
.populations-root .era-chalcolithic { --era: #b3850f; }
.populations-root .era-bronze { --era: #c8641e; }
.populations-root .era-iron { --era: #b8423a; }
.populations-root .era-historical { --era: #9b3f86; }
.populations-root .era-medieval { --era: #5a55b5; }
.populations-root .era-simulated { --era: #7a7a7a; }
.populations-root .era-ancient { --era: #8e7f6c; }
.populations-root .era-modern { --era: #2e668c; }
body.dark .populations-root .era-hunter-gatherer { --era: #5cc08a; }
body.dark .populations-root .era-neolithic { --era: #b3c44a; }
body.dark .populations-root .era-chalcolithic { --era: #e2b23a; }
body.dark .populations-root .era-bronze { --era: #ef8c4a; }
body.dark .populations-root .era-iron { --era: #ea706a; }
body.dark .populations-root .era-historical { --era: #d07cc0; }
body.dark .populations-root .era-medieval { --era: #9d98ee; }
body.dark .populations-root .era-simulated { --era: #9a9a9a; }
body.dark .populations-root .era-ancient { --era: #b8a990; }
body.dark .populations-root .era-modern { --era: #5bb8d9; }

/* The app gives bare elements colours of their own, which would show through
   the pre-rendered markup as slabs; reset the plain ones (as guidesRoot does). */
.populations-root section, .populations-root nav, .populations-root div, .populations-root p,
.populations-root ul, .populations-root ol, .populations-root li, .populations-root dl,
.populations-root dt, .populations-root dd, .populations-root table, .populations-root tr,
.populations-root td, .populations-root th, .populations-root h1, .populations-root h2,
.populations-root h3, .populations-root footer, .populations-root aside {
    background: transparent;
    color: inherit;
}
.populations-root a { color: var(--link); text-decoration: none; }
.populations-root a:hover { text-decoration: underline; }
.populations-root code { font-family: var(--mono); font-size: 0.82em; background: none; color: inherit; padding: 0; }
.populations-root [hidden] { display: none !important; }

/* ── top: breadcrumb and search ── */
.populations-root .pop-top { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 26px; }
/* The guides' trail (guidesRoot.scss .crumbs): the way back in small caps,
   a faint slash between, the page itself in plain bold. */
.populations-root .crumbs { flex: 1 1 auto; min-width: 0; }
.populations-root .crumbs ol {
    display: flex; flex-wrap: wrap; align-items: center; gap: 10px; list-style: none; margin: 0; padding: 0;
    font-size: 13px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--ink-dim);
}
.populations-root .crumbs li + li::before { content: "/"; margin-right: 10px; opacity: 0.5; }
.populations-root .crumbs a { color: var(--ink-dim); font-weight: 700; }
.populations-root .crumbs a:hover { color: var(--ink); text-decoration: none; }
.populations-root .crumbs [aria-current] { color: var(--ink); font-weight: 700; text-transform: none; letter-spacing: 0.2px; font-size: 14px; }
.populations-root .pop-search { flex: 0 1 320px; min-width: 0; margin: 0 0 0 auto; }
.populations-root .pop-search input,
.populations-root .filter input {
    width: 100%;
    height: 36px;
    padding: 0 12px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--bg-raised);
    color: var(--ink);
    font: inherit;
    font-size: 15px;
}

/* The suggestions under the search box (populations.vue): a raised panel,
   a row per match with its period's dot or its kind's, the name over its
   catalogue label, and the kind on the right. */
.populations-root .pop-search { position: relative; }
.populations-root .pop-suggest {
    position: absolute; top: calc(100% + 6px); right: 0; z-index: 30;
    width: max(100%, 440px); max-width: calc(100vw - 32px);
    list-style: none; margin: 0; padding: 6px;
    border: 1px solid var(--line); border-radius: var(--radius);
    background: var(--bg-raised); box-shadow: 0 18px 44px -14px rgb(0 0 0 / 0.35);
}
body.dark .populations-root .pop-suggest { box-shadow: 0 18px 50px -12px rgb(0 0 0 / 0.7); }
.populations-root .pop-suggest a {
    display: flex; align-items: center; gap: 10px; padding: 7px 10px;
    border-radius: 6px; color: var(--ink); text-decoration: none;
}
.populations-root .pop-suggest li.active a { background: var(--bg-sunken); }
.populations-root .sg-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--era); }
.populations-root .sg-dot.sg-period { background: var(--accent); }
.populations-root .sg-dot.sg-country { background: var(--ink-dim); }
.populations-root .sg-dot.sg-y { background: var(--blue); border-radius: 2px; }
.populations-root .sg-dot.sg-mt { background: var(--accent); border-radius: 2px; }
.populations-root .sg-text { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }
.populations-root .sg-name { overflow: hidden; font-size: 15px; font-weight: 600; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.populations-root .sg-meta { overflow: hidden; color: var(--ink-dim); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.populations-root .sg-kind {
    flex: none; padding: 0 7px; border-radius: 4px; background: var(--pill); color: var(--ink-dim);
    font-size: 10px; font-weight: 700; letter-spacing: 0.06em; line-height: 18px; text-transform: uppercase;
}
.populations-root .pop-suggest .sg-all { margin-top: 4px; padding-top: 4px; border-top: 1px solid var(--line-soft); }
.populations-root .pop-suggest .sg-all a { color: var(--link); font-size: 14px; font-weight: 600; }

/* ── type ── */
.populations-root .eyebrow { margin: 0; color: var(--accent); font-size: 12px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; }
.populations-root h1 { margin: 6px 0 6px; font-size: clamp(28px, 4vw, 40px); font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; }
.populations-root h2 { margin: 40px 0 12px; font-size: 22px; font-weight: 800; }
.populations-root h3 { margin: 24px 0 8px; font-size: 17px; color: var(--ink-dim); }
.populations-root .label { margin: 0 0 16px; color: var(--ink-dim); }
.populations-root .lede { max-width: 760px; font-size: 18px; color: var(--ink); }
.populations-root .lede p { margin: 0 0 10px; }
.populations-root p.lede { margin: 0 0 8px; }
.populations-root .note { max-width: 760px; color: var(--ink-dim); font-size: 14px; margin: 0 0 14px; }
.populations-root .muted { color: var(--ink-dim); font-size: 13px; }
.populations-root .count {
    display: inline-block;
    min-width: 24px;
    padding: 0 7px;
    border-radius: 999px;
    background: var(--pill);
    color: var(--ink-dim);
    font-size: 12px;
    font-weight: 600;
    line-height: 20px;
    text-align: center;
    vertical-align: middle;
}
.populations-root .pill {
    display: inline-block;
    padding: 0 6px;
    border-radius: 4px;
    background: var(--pill);
    color: var(--ink-dim);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    vertical-align: middle;
}
.populations-root .btn {
    display: inline-block;
    padding: 8px 16px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--bg-raised);
    color: var(--ink);
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
}
.populations-root .btn:hover { text-decoration: none; border-color: var(--ink-dim); }
/* The app's standard blue with white text in both themes. App.vue forces
   .btn-primary orange everywhere (the calculator toggle's accent), so this
   needs !important to take the blue (CLAUDE.md). */
.populations-root .btn-primary { background: #2e668c !important; border-color: #2e668c !important; color: #fff !important; }
.populations-root .btn-primary:hover { background: #3776a1 !important; border-color: #3776a1 !important; }

/* ── population page ── */
.populations-root .grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 20px; margin-top: 24px; align-items: start; }
.populations-root .facts { display: grid; margin: 0; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-raised); overflow: hidden; }
.populations-root .facts > div { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 12px; padding: 10px 16px; border-top: 1px solid var(--line-soft); }
.populations-root .facts > div:first-child { border-top: 0; }
.populations-root .facts dt { color: var(--ink-dim); font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding-top: 3px; }
.populations-root .facts dd { margin: 0; overflow-wrap: anywhere; }
.populations-root .cta { padding: 18px 20px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-raised); }
.populations-root .cta h2 { margin: 0 0 8px; font-size: 18px; }
.populations-root .cta p { margin: 0 0 12px; color: var(--ink-dim); font-size: 15px; }
.populations-root .cta .actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }

.populations-root .pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.populations-root .table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-raised); }
.populations-root table { width: 100%; border-collapse: collapse; font-size: 15px; }
/* Above the table: the app's Bootstrap puts captions at the bottom. */
.populations-root caption { caption-side: top; padding: 10px 14px 0; text-align: left; color: var(--ink-dim); font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.populations-root th, .populations-root td { padding: 8px 14px; text-align: left; border-top: 1px solid var(--line-soft); vertical-align: top; }
.populations-root thead th { border-top: 0; color: var(--ink-dim); font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.populations-root td code { display: block; color: var(--ink-dim); font-size: 12px; overflow-wrap: anywhere; }
.populations-root .ind td code { display: inline; color: var(--ink); font-size: 13px; }
.populations-root .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.populations-root .rank { width: 32px; color: var(--ink-dim); font-variant-numeric: tabular-nums; }
.populations-root tr.outlier td { color: var(--ink-dim); }
.populations-root .ind td .muted { white-space: nowrap; }

.populations-root .haplo h3 { margin: 0; color: var(--ink); font-size: 16px; }
.populations-root .haplo > .muted { margin: 2px 0 10px; }
.populations-root .calls { columns: 2 200px; column-gap: 24px; margin: 0; padding: 0; list-style: none; }
.populations-root .calls li { break-inside: avoid; padding: 3px 0; }
.populations-root .topics { margin: 0; padding-left: 20px; }
.populations-root .topics li { margin: 4px 0; }

/* ── the index ── */
.populations-root .pop-hero .lede { color: var(--ink-dim); font-size: 19px; }
.populations-root .stats {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px;
    list-style: none; margin: 28px 0 0; padding: 0;
}
.populations-root .stats li {
    display: flex; flex-direction: column; gap: 2px; padding: 14px 16px;
    border: 1px solid var(--line); border-top: 3px solid var(--era); border-radius: var(--radius);
    background: var(--bg-raised);
}
.populations-root .stats b { color: var(--era); font-size: 28px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.populations-root .stats span { color: var(--ink-dim); font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }

/* The catalogue's make-up by period, oldest first: one bar, then a card per
   period in the same colours. */
.populations-root .timeline { display: flex; gap: 3px; height: 10px; margin: 4px 0 18px; }
.populations-root .timeline span { min-width: 6px; border-radius: 3px; background: var(--era); }
.populations-root .eras { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px; list-style: none; margin: 0; padding: 0; }
.populations-root .eras > li {
    display: flex; flex-direction: column; padding: 14px 16px 16px;
    border: 1px solid var(--line); border-left: 4px solid var(--era); border-radius: var(--radius);
    background: var(--bg-raised);
    transition: transform 0.16s ease, border-color 0.16s ease;
}
.populations-root .eras > li:hover { transform: translateY(-2px); border-color: var(--era); }
.populations-root .era-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; color: var(--ink); }
.populations-root .era-head:hover { text-decoration: none; }
.populations-root .era-name { font-size: 16px; font-weight: 800; line-height: 1.3; }
.populations-root .era-head b { color: var(--era); font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; }
.populations-root .era-eg { list-style: none; margin: 8px 0 0; padding: 8px 0 0; border-top: 1px solid var(--line-soft); }
.populations-root .era-eg li { overflow: hidden; padding: 1px 0; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.populations-root .era-eg a { color: var(--ink-dim); }
.populations-root .era-eg a:hover { color: var(--ink); }

/* Countries by region, packed into columns so the long regions and the
   short ones share the space. */
.populations-root .regions { columns: 2 440px; column-gap: 16px; }
.populations-root .region, .populations-root .kind {
    break-inside: avoid; margin: 0 0 16px; padding: 14px 16px 16px;
    border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-raised);
}
.populations-root .region h3, .populations-root .kind h3 { margin: 0 0 10px; color: var(--ink); font-size: 16px; }
.populations-root .region h3 .muted, .populations-root .kind h3 .muted { margin-left: 6px; font-weight: 400; }
.populations-root .region .chips a, .populations-root .kind .chips a { background: var(--bg); }

/* Y-DNA in the app blue, mtDNA in the accent: the two lines told apart. */
.populations-root .kinds { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); gap: 16px; }
.populations-root .kind { margin: 0; border-top: 3px solid var(--tint); }
.populations-root .kind-y { --tint: var(--blue); }
.populations-root .kind-mt { --tint: var(--accent); }
.populations-root .kind .chips a { border-color: color-mix(in srgb, var(--tint) 35%, var(--line)); }
.populations-root .kind .chips a:hover { border-color: var(--tint); }
.populations-root .kind .count { background: color-mix(in srgb, var(--tint) 16%, transparent); color: var(--tint); }

/* A population in any list: a dot in its period's colour. */
.populations-root .pops li[class^="era-"] { position: relative; padding-left: 16px; }
.populations-root .pops li[class^="era-"]::before {
    content: ""; position: absolute; left: 0; top: 0.72em; width: 8px; height: 8px; border-radius: 50%; background: var(--era);
}

/* ── hubs and index ── */
.populations-root .chips { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.populations-root .chips a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--bg-raised);
    color: var(--ink);
    font-size: 15px;
}
.populations-root .chips a:hover { text-decoration: none; border-color: var(--blue); }
.populations-root .chips.small a { padding: 3px 10px; font-size: 14px; }
.populations-root .group h2 { font-size: 20px; }
.populations-root .group h2 a { color: var(--ink); }
.populations-root .pops { columns: 2 320px; column-gap: 32px; margin: 0; padding: 0; list-style: none; }
.populations-root .pops li { break-inside: avoid; padding: 3px 0; }
.populations-root .pops code { color: var(--ink-dim); font-size: 12px; margin-left: 4px; overflow-wrap: anywhere; }
.populations-root .filter { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.populations-root .filter input { flex: 0 1 420px; height: 38px; }
.populations-root #hubs { margin: 4px 0 12px; }
.populations-root .letters { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; }
.populations-root .letters a {
    display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px;
    border: 1px solid var(--line); border-radius: 6px; background: var(--bg-raised); color: var(--ink);
    font-size: 14px; font-weight: 700;
}
.populations-root .letters a:hover { border-color: var(--blue); color: var(--blue); text-decoration: none; }
.populations-root .letter h3 { color: var(--accent); font-size: 20px; font-weight: 800; }
.populations-root .letter, .populations-root #all, .populations-root #haplogroups { scroll-margin-top: 80px; }

.populations-root .pop-foot { margin-top: 56px; padding-top: 18px; border-top: 1px solid var(--line); color: var(--ink-dim); font-size: 13px; }
.populations-root .pop-foot p { margin: 4px 0; }
.populations-root .pop-loading { padding: 40px 0; color: var(--ink-dim); }

@media (max-width: 760px) {
    .populations-root { padding: 76px 16px 80px; }
    .populations-root .grid, .populations-root .pair { grid-template-columns: minmax(0, 1fr); }
    .populations-root .facts > div { grid-template-columns: 100px minmax(0, 1fr); }
    .populations-root .lede { font-size: 17px; }
    .populations-root .pop-search { flex: 1 1 100%; }
    /* A population's dot already says what it is; give its name the room. */
    .populations-root .sg-kind-p { display: none; }
    .populations-root .sg-name { white-space: normal; }
    /* Two period cards a row, without the examples: ten full cards is a lot of thumb. */
    .populations-root .eras { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .populations-root .era-eg { display: none; }
    .populations-root .era-head { flex-direction: column; gap: 4px; }
}