/* أبناء نوح والأمم — the map, the tree and the table of Genesis 10.
   Uses the site's own colours and fonts (styles.css). Everything here starts with nx- so it never touches the sessions or the Bible pages.
   Branches: Japheth in teal, Ham in gold, Shem in maroon. */

:root{
  --nx-land:#EFE6D0; --nx-sea:#CFE1DD; --nx-coast:#A8B7B0; --nx-river:#6FA3A8; --nx-seaink:#4B7C80;
  --nx-teal-ink:#35645F; --nx-gold-ink:#7A5C22;
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  --nx-land:#2E2729; --nx-sea:#16272B; --nx-coast:#4B4044; --nx-river:#4C8A90; --nx-seaink:#5F9AA0;
  --nx-teal-ink:var(--teal); --nx-gold-ink:var(--gold) } }
:root[data-theme="dark"]{
  --nx-land:#2E2729; --nx-sea:#16272B; --nx-coast:#4B4044; --nx-river:#4C8A90; --nx-seaink:#5F9AA0;
  --nx-teal-ink:var(--teal); --nx-gold-ink:var(--gold) }

.nx-j{--c:var(--teal);--cx:var(--nx-teal-ink);--ct:var(--teal-soft)}
.nx-h{--c:var(--gold);--cx:var(--nx-gold-ink);--ct:var(--gold-soft)}
.nx-s{--c:var(--maroon);--cx:var(--maroon);--ct:var(--maroon-soft)}

.nx{min-width:0}
.nx button{font:inherit}
.nx-lead{max-width:62ch;color:var(--muted)}

/* branch cards (they also filter) */
.nx-branches{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.nx-bc{display:flex;flex-direction:column;gap:2px;text-align:start;background:var(--surface);border:1.5px solid var(--line);border-radius:14px;padding:12px 14px;min-width:0;color:var(--ink)}
.nx-bc .sw{width:26px;height:6px;border-radius:3px;background:var(--c,var(--ink));margin-bottom:6px}
.nx-bc .nm{font-family:var(--display);font-size:1.6rem;font-weight:700;line-height:1.25;color:var(--cx,var(--ink))}
.nx-bc .mn{font-size:.88rem;color:var(--muted);line-height:1.6}
.nx-bc .ct{font-size:.82rem;color:var(--muted);font-variant-numeric:tabular-nums}
.nx-bc[aria-pressed="true"]{background:var(--ct,var(--surface));border-color:var(--c,var(--ink))}
.nx-bc.nx-all{--c:var(--ink);--cx:var(--ink);--ct:var(--surface)}

/* views */
.nx-tabs{display:flex;gap:6px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.nx-tab{background:none;border:0;border-bottom:3px solid transparent;padding:6px 18px;font-weight:600;font-size:1.05rem;color:var(--muted);margin-bottom:-1px}
.nx-tab[aria-selected="true"]{color:var(--maroon);border-bottom-color:var(--gold)}
.nx-chip{background:var(--bg);border:1px solid var(--line);border-radius:999px;padding:1px 12px;font-size:.88rem;color:var(--ink);min-width:0}
.nx-chip[aria-pressed="true"]{background:var(--maroon);border-color:var(--maroon);color:var(--on-accent);font-weight:700}
.nx-hint{font-size:.88rem;color:var(--muted);margin:0}
.nx-links{display:flex;flex-wrap:wrap;gap:8px 16px;font-size:.95rem}

/* map */
.nx-mapview{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:16px;align-items:start}
.nx-mapcard{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:10px;min-width:0;display:flex;flex-direction:column;gap:10px}
.nx-regions{display:flex;flex-wrap:wrap;gap:6px}
.nx-stage{position:relative;border-radius:10px;overflow:hidden;border:1px solid var(--line)}
#nx-map{display:block;width:100%;height:auto;aspect-ratio:980/658;background:var(--nx-sea);cursor:grab;user-select:none;-webkit-user-select:none}
#nx-map.drag{cursor:grabbing}
.nx-zoom{position:absolute;inset-block-start:10px;inset-inline-start:10px;display:flex;flex-direction:column;gap:4px}
.nx-zoom button{width:36px;height:36px;border-radius:8px;border:1px solid var(--line);background:var(--surface);font-size:1.25rem;line-height:1;font-weight:700;color:var(--ink)}
.nx-legend{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:.88rem;color:var(--muted);align-items:center}
.nx-legend i{display:inline-block;width:11px;height:11px;border-radius:50%;margin-inline-end:5px;vertical-align:-1px;background:var(--c)}
.nx-legend .nx-routekey i{border-radius:0;width:20px;height:0;border-top:3px dashed var(--nx-gold-ink);background:none;vertical-align:3px}
.nx-legend label{display:flex;align-items:center;gap:6px;cursor:pointer}
.nx-legend input{accent-color:var(--teal);width:16px;height:16px}

.nx-land{fill:var(--nx-land)}
.nx-sea{fill:var(--nx-sea);stroke:var(--nx-coast);stroke-width:1.2px;vector-effect:non-scaling-stroke}
.nx-shape{fill:var(--nx-land);stroke:var(--nx-coast);stroke-width:1.2px;vector-effect:non-scaling-stroke}
.nx-river{fill:none;stroke:var(--nx-river);stroke-width:2px;vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-linejoin:round}
.nx-wm{font-family:var(--display);font-weight:700;font-size:62px;text-anchor:middle;opacity:.16;fill:var(--c)}
.nx-seal{fill:var(--nx-seaink);font-size:14px;text-anchor:middle;font-style:italic}
.nx-link{fill:none;stroke:var(--c);stroke-width:1.6px;stroke-dasharray:4 3;vector-effect:non-scaling-stroke}
.nx-route{fill:none;stroke:var(--nx-gold-ink);stroke-width:2.4px;stroke-dasharray:7 5;vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-linejoin:round}
.nx-mk{cursor:pointer}
.nx-mk .dot{fill:var(--c);stroke:var(--surface);stroke-width:1.8px;vector-effect:non-scaling-stroke}
.nx-mk .ring{fill:none;stroke:var(--ink);stroke-width:2.2px;vector-effect:non-scaling-stroke}
.nx-mk:hover .dot{stroke:var(--ink)}
.nx-mk.dim{opacity:.18}
.nx-mk .lb{fill:var(--ink);font-family:var(--body);font-weight:700;text-anchor:middle;dominant-baseline:central;paint-order:stroke;stroke:var(--nx-land);stroke-linejoin:round}
.nx-mk.sel .lb{fill:var(--cx)}
.nx-mk .hov{display:none}
.nx-mk:hover .hov,.nx-mk:focus .hov{display:block}
.nx-mk:focus{outline:none}
.nx-mk:focus .dot{stroke:var(--ink)}
.nx-ab .dia{fill:var(--gold);stroke:var(--surface);stroke-width:1.8px;vector-effect:non-scaling-stroke}
.nx-ab .lb{fill:var(--nx-gold-ink);font-family:var(--body);font-weight:700;text-anchor:middle;dominant-baseline:central;paint-order:stroke;stroke:var(--nx-land)}

/* detail card */
.nx-detail{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:16px;display:flex;flex-direction:column;gap:12px;min-width:0;position:sticky;inset-block-start:12px}
.nx-detail h2{font-size:2.3rem;line-height:1.15;color:var(--cx)}
.nx-crumb{display:flex;flex-wrap:wrap;gap:4px 6px;font-size:.88rem;color:var(--muted);align-items:center}
.nx-crumb button{background:none;border:0;padding:0;color:var(--cx,var(--ink));font-weight:700;text-decoration:underline;text-underline-offset:3px}
.nx-fact{display:flex;flex-direction:column;gap:1px}
.nx-fact .k{font-size:.82rem;color:var(--muted)}
.nx-fact .v{font-size:1.05rem}
.nx-fact.nat .v{font-size:1.25rem;font-weight:700;color:var(--cx)}
.nx-note{margin:0;background:var(--ct);border-radius:10px;padding:10px 12px;font-size:.95rem;line-height:1.85}
.nx-kids{display:flex;flex-wrap:wrap;gap:6px}
.nx-pill{background:var(--ct);color:var(--cx);border:1px solid var(--c);border-radius:999px;padding:0 12px;font-weight:700;font-size:.95rem}
.nx-pill:hover{background:var(--c);color:var(--on-accent)}
.nx-btn{background:var(--maroon);color:var(--on-accent);border:1px solid var(--maroon);border-radius:10px;padding:6px 16px;font-weight:600;font-size:.95rem;align-self:flex-start}
.nx-btn.ghost{background:none;color:var(--maroon)}
.nx-chrst{display:inline-block;align-self:flex-start;background:var(--gold-soft);color:var(--nx-gold-ink);border-radius:999px;padding:0 10px;font-size:.82rem;font-weight:700}
.nx-contents{display:contents}

/* tree */
.nx-noah{display:flex;flex-direction:column;align-items:center;margin-bottom:14px}
.nx-noah .n{font-family:var(--display);font-size:2.1rem;font-weight:700;color:var(--ink);background:var(--surface);border:1.5px solid var(--line);border-radius:14px;padding:0 28px;line-height:1.5}
.nx-noah .s{font-size:.88rem;color:var(--muted)}
.nx-noah .stem{width:2px;height:16px;background:var(--line)}
.nx-bar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:12px}
.nx-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;align-items:start}
.nx-cols.one{grid-template-columns:minmax(0,1fr)}
.nx-col{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:14px;min-width:0}
.nx-col.hide{display:none}
.nx-colhead{display:flex;flex-direction:column;margin-bottom:10px;padding-bottom:10px;border-bottom:2px solid var(--c)}
.nx-rootbtn{background:none;border:0;padding:0;text-align:start;font-family:var(--display);font-size:2rem;font-weight:700;color:var(--cx);line-height:1.3}
.nx-colhead .m{font-size:.88rem;color:var(--muted)}
ul.nx-t{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
ul.nx-t ul.nx-t{margin-top:6px;margin-inline-start:11px;padding-inline-start:14px;border-inline-start:2px solid var(--line)}
li.collapsed>ul.nx-t{display:none}
.nx-row{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
.nx-tg{width:22px;height:22px;flex:none;border-radius:6px;border:1px solid var(--line);background:var(--bg);font-size:.75rem;line-height:1;padding:0;color:var(--muted)}
.nx-tg.sp{visibility:hidden}
li.collapsed>.nx-row .nx-tg{transform:rotate(90deg)}
.nx-pn{background:var(--ct);color:var(--cx);border:1px solid var(--c);border-radius:8px;padding:0 10px;font-weight:700;font-size:1rem}
.nx-pn:hover{background:var(--c);color:var(--on-accent)}
.nx-arr{color:var(--muted)}
.nx-nt{font-size:.95rem;min-width:0;flex:1 1 120px}
li.sel>.nx-row .nx-pn{background:var(--c);color:var(--on-accent)}
li.sel>.nx-row .nx-nt{font-weight:700}
.nx-inl{margin:6px 0 4px;margin-inline-start:28px;background:var(--ct);border-radius:10px;padding:10px 12px;display:flex;flex-direction:column;gap:6px;font-size:.92rem;line-height:1.8}
.nx-inl .meta{display:flex;flex-wrap:wrap;gap:2px 16px;color:var(--muted);font-size:.88rem}
.nx-inl .meta b{color:var(--ink);font-weight:600}

/* table */
.nx-search{flex:1 1 220px;max-width:340px;border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:12px;padding:6px 14px;font:inherit;font-size:.95rem;direction:rtl}
.nx-tw{overflow-x:auto;background:var(--surface);border:1px solid var(--line);border-radius:16px}
.nx-tw table{border-collapse:collapse;width:100%;min-width:760px;font-size:.95rem}
.nx-tw th{background:var(--bg);text-align:start;font-weight:700;font-size:.82rem;color:var(--muted);padding:8px 12px;border-bottom:1px solid var(--line);white-space:nowrap}
.nx-tw td{padding:7px 12px;border-bottom:1px solid var(--line);vertical-align:top}
.nx-tw tr.gh td{background:var(--ct);color:var(--cx);font-family:var(--display);font-size:1.35rem;font-weight:700;padding:4px 12px}
.nx-tw tr.gh td small{font-family:var(--body);font-size:.85rem;font-weight:400;color:var(--muted);margin-inline-start:8px}
.nx-tw tr.dr{cursor:pointer}
.nx-tw tr.dr:hover td{background:var(--bg)}
.nx-tw tr.dr.sel td{background:var(--ct)}
.nx-tw td.n{font-weight:700;color:var(--cx);white-space:nowrap}
.nx-tw td.v{white-space:nowrap;font-variant-numeric:tabular-nums}
.nx-empty{padding:20px;color:var(--muted)}

/* below the views */
.nx-reflect{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:18px;display:flex;flex-direction:column;gap:10px}
.nx-reflect ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 24px}
.nx-reflect li{padding-inline-start:20px;position:relative}
.nx-reflect li::before{content:"♰";position:absolute;inset-inline-start:0;color:var(--gold);font-size:.8em;top:.25em}
.nx-src{font-size:.9rem;color:var(--muted);display:flex;flex-direction:column;gap:6px}
.nx-src h3{font-size:1.3rem}
.nx-src ul{margin:0;padding-inline-start:20px}

@media (max-width:900px){
  .nx-mapview{grid-template-columns:minmax(0,1fr)}
  .nx-detail{position:static}
  .nx-cols{grid-template-columns:minmax(0,1fr)}
  .nx-branches{grid-template-columns:repeat(2,minmax(0,1fr))}
  .nx-reflect ul{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:480px){
  .nx-tab{padding:6px 12px}
  .nx-bc .nm{font-size:1.4rem}
}
@media (prefers-reduced-motion:reduce){ .nx *{transition:none!important} }