/* Layout idea: a calm single-column lookup — logo, one search field, four dropdown filters, results in soft white table cards grouped by lineage. */
:root{
  --bg:#F7F9FA; --surface:#FFFFFF; --ink:#1E2A2E; --muted:#7A868B; --line:#E5EAEC; --soft:#F1F4F5;
  --teal:#2E6E6A; --green:#1F7A47; --green-bg:#EEFBF3; --green-line:#BFEBD0;
  --pill-teal:#B9F0E4; --pill-teal-ink:#1D5E55; --pill-blue:#CDE7FB; --pill-blue-ink:#1F4E73; --pill-grey:#E9EEF0;
  --accent:#2E6E6A;
  --font-body:"Noto Kufi Arabic",system-ui,"Segoe UI",Tahoma,sans-serif;
  --font-logo:"Raleway",system-ui,sans-serif;
  --font-mono:"Roboto Mono",ui-monospace,Menlo,Consolas,monospace;
  --shadow:0 1px 2px rgba(20,40,45,.04),0 4px 14px rgba(20,40,45,.05);
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0F1517; --surface:#171F22; --ink:#E4ECEE; --muted:#93A2A7; --line:#263236; --soft:#1D272A;
    --teal:#7CC9C0; --green:#6FD99B; --green-bg:#13281D; --green-line:#24503A;
    --pill-teal:#164A42; --pill-teal-ink:#BDF3E7; --pill-blue:#173A55; --pill-blue-ink:#CFE7FB; --pill-grey:#263236;
    --accent:#7CC9C0; --shadow:0 1px 2px rgba(0,0,0,.3); color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#0F1517; --surface:#171F22; --ink:#E4ECEE; --muted:#93A2A7; --line:#263236; --soft:#1D272A;
  --teal:#7CC9C0; --green:#6FD99B; --green-bg:#13281D; --green-line:#24503A;
  --pill-teal:#164A42; --pill-teal-ink:#BDF3E7; --pill-blue:#173A55; --pill-blue-ink:#CFE7FB; --pill-grey:#263236;
  --accent:#7CC9C0; --shadow:0 1px 2px rgba(0,0,0,.3); color-scheme:dark;
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--ink);font-family:var(--font-body);font-size:14.5px;line-height:1.6}
body.lock{overflow:hidden}
.num{font-variant-numeric:tabular-nums}
.page{max-width:1040px;margin:0 auto;padding:20px 14px 40px;display:flex;flex-direction:column;gap:14px}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
svg{fill:currentColor}

/* logo */
.logo{display:flex;justify-content:center;padding:6px 0 2px}
.mark{position:relative;font-family:var(--font-logo);font-weight:300;font-size:40px;letter-spacing:.12em;color:#2F5563;line-height:1;padding:8px 6px 4px;direction:ltr}
.mark i{position:absolute;left:50%;top:50%;width:52px;height:52px;margin:-28px 0 0 -24px;border-radius:50%;background:var(--soft);box-shadow:inset 0 0 0 1px var(--line);z-index:-1}
:root[data-theme="dark"] .mark{color:#A9CAD3}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .mark{color:#A9CAD3}}

/* search */
.search{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);display:flex;align-items:center}
.search input{flex:1;border:0;background:transparent;font:inherit;font-size:15px;color:var(--ink);padding:15px 50px 15px 16px;border-radius:14px;min-width:0}
.search input:focus{outline:none}
.search:focus-within{border-color:var(--accent)}
.sicon{position:absolute;right:16px;width:22px;height:22px;color:#4B5D63;pointer-events:none}

/* dropdown buttons */
.dds{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
.dd{display:flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:12px 14px;font:inherit;font-weight:600;font-size:14px;color:var(--ink);cursor:pointer;box-shadow:var(--shadow);min-width:0}
.dd>svg:first-child{width:20px;height:20px;color:var(--teal);flex:0 0 auto}
.dd .lbl{flex:1;text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dd .chev{width:18px;height:18px;color:var(--muted);flex:0 0 auto;transition:transform .15s}
.dd[aria-expanded="true"]{border-color:var(--accent)}
.dd[aria-expanded="true"] .chev{transform:rotate(180deg)}
.dd.on{border-color:var(--accent);background:var(--green-bg)}
.dd.on .lbl{color:var(--teal)}

/* panels */
.backdrop{display:none}
.panel{display:none;flex-direction:column;gap:12px;background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:0 10px 30px rgba(20,40,45,.10);padding:14px 16px 0}
.panel.open{display:flex}
.phead{display:flex;align-items:center;justify-content:space-between}
.phead h2{margin:0;font-size:15px;font-weight:700}
.x{all:unset;cursor:pointer;width:32px;height:32px;display:grid;place-items:center;border-radius:50%;font-size:22px;color:var(--muted)}
.x:hover{background:var(--soft)}
.panel input[type=search],.panel select{font:inherit;color:var(--ink);background:var(--soft);border:1px solid var(--line);border-radius:10px;padding:10px 12px;width:100%}
.panel select{width:auto}
.row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.hint{color:var(--muted);font-size:12.5px}
.note{margin:0;font-size:12px;color:var(--muted);background:var(--soft);border-radius:8px;padding:8px 10px}
.pfoot{position:sticky;bottom:0;display:flex;justify-content:space-between;align-items:center;gap:10px;background:var(--surface);border-top:1px solid var(--line);padding:10px 0 12px;margin-top:2px}
.go{font:inherit;font-weight:600;border:0;background:var(--teal);color:#fff;border-radius:10px;padding:9px 18px;cursor:pointer}
:root[data-theme="dark"] .go{color:#0F1517}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .go{color:#0F1517}}
.link{all:unset;cursor:pointer;color:var(--teal);font-size:13px;font-weight:600;padding:4px 2px}
.link:hover{text-decoration:underline}
.pill{font:inherit;font-size:12.5px;border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:999px;padding:5px 12px;cursor:pointer}
.pill[aria-pressed="true"]{background:var(--teal);border-color:var(--teal);color:#fff}
.chk{display:flex;align-items:center;gap:6px}
.sugg{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:10px;max-height:280px;overflow-y:auto}
.sugg button{all:unset;cursor:pointer;padding:9px 12px;display:flex;justify-content:space-between;gap:12px;border-bottom:1px solid var(--line)}
.sugg button:last-child{border-bottom:0}
.sugg button:hover,.sugg button:focus-visible{background:var(--soft)}
.mono{font-family:var(--font-mono);font-size:12.5px;direction:ltr;unicode-bidi:isolate}
.checks{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:2px 10px;max-height:320px;overflow-y:auto}
.checks label{display:flex;gap:8px;align-items:center;padding:7px 6px;border-radius:8px;cursor:pointer}
.checks label:hover{background:var(--soft)}
.checks .fl{font-size:18px;line-height:1}
.checks.one{grid-template-columns:1fr}
.checks .lv{display:flex;flex-direction:column;line-height:1.35}
.checks .lv small{color:var(--muted);font-size:11.5px}
.checks .c{margin-inline-start:auto;color:var(--muted);font-size:12px}
.chip{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:6px 12px;font:inherit;font-size:13px;cursor:pointer;color:var(--ink);min-height:34px}
.chip:hover{border-color:var(--accent)}
.chip[aria-pressed="true"]{background:var(--teal);border-color:var(--teal);color:#fff}
.chip[aria-pressed="true"] .c{color:rgba(255,255,255,.8)}
.chip .c{color:var(--muted);font-size:11.5px}
.tchips{display:flex;flex-wrap:wrap;gap:6px;max-height:340px;overflow-y:auto}
.plgroups{display:flex;flex-direction:column;gap:12px;max-height:380px;overflow-y:auto}
.plg h3{font-size:12px;margin:0 0 6px;color:var(--muted);font-weight:600}
.plg .tchips{max-height:none}

/* tree */
.tree{border:1px solid var(--line);border-radius:10px;max-height:420px;overflow:auto;direction:ltr;padding:4px 0}
.tn{display:flex;align-items:center;gap:6px;padding:4px 8px;white-space:nowrap;min-height:34px}
.tn:hover{background:var(--soft)}
.tn .tg{all:unset;cursor:pointer;width:24px;height:24px;display:grid;place-items:center;color:var(--muted);font-size:12px;border-radius:6px}
.tn .tg:hover{background:var(--line)}
.tn label{display:flex;align-items:center;gap:6px;cursor:pointer}
.tn input{width:16px;height:16px;accent-color:var(--teal)}
.tn .nm{font-family:var(--font-mono);font-size:12.5px;color:var(--green);font-weight:600}
.tn .cnt{font-size:11.5px;color:var(--muted);direction:rtl}
.tn .cnt b{color:var(--ink)}
.tn .via{font-size:11px;color:var(--muted);direction:rtl;border-inline-start:1px solid var(--line);padding-inline-start:6px}
.trk{cursor:pointer;color:var(--teal);font-family:var(--font-mono);font-size:12px}
.more{all:unset;cursor:pointer;color:var(--teal);font-size:12.5px;padding:2px 8px}

/* status bar */
.bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.count{font-size:14px;color:var(--muted)}
.count b{color:var(--ink);font-size:17px}
.pmeta{display:inline-block;margin-inline-start:8px;padding-inline-start:10px;border-inline-start:1px solid var(--line);font-size:12.5px;color:var(--muted)}
.active{display:flex;flex-wrap:wrap;gap:6px;flex:1}
.afil{display:inline-flex;align-items:center;gap:4px;background:var(--green-bg);border:1px solid var(--green-line);color:var(--ink);border-radius:999px;padding:2px 4px 2px 10px;font-size:12.5px}
.afil button{all:unset;cursor:pointer;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;color:var(--teal);font-weight:700}
.afil button:hover{background:var(--teal);color:#fff}
.tools{display:flex;align-items:center;gap:10px}
.tools select{font:inherit;font-size:12.5px;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:5px 8px}

/* result cards */
main{display:flex;flex-direction:column;gap:18px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);overflow:hidden}
.card.loading{padding:40px;text-align:center;color:var(--muted)}
.ghead{display:flex;justify-content:space-between;align-items:center;padding:10px 16px 0;font-size:12.5px;color:var(--muted)}
.ghead .mono{color:var(--green);font-weight:600}
table{border-collapse:collapse;width:100%;table-layout:fixed}
thead th{background:var(--soft);color:var(--muted);font-weight:500;font-size:12.5px;text-align:right;padding:12px 10px;border-bottom:1px solid var(--line)}
td{padding:14px 10px;border-bottom:1px solid var(--line);vertical-align:middle;font-size:14px}
tbody tr.r:last-of-type td,tbody tr.det:last-child td{border-bottom:0}
tr.r{cursor:pointer}
tr.r:hover td{background:var(--soft)}
tr.r[aria-expanded="true"] td{background:var(--green-bg)}
.c-kit{width:21%}.c-name{width:31%}.c-ct{width:11%;text-align:center}.c-hg{width:20%}.c-test{width:17%}
.kit{display:inline-block;font-family:var(--font-mono);font-size:12.5px;font-weight:600;color:#3E5560;background:var(--pill-grey);border-radius:6px;padding:4px 7px;direction:ltr;max-width:100%;overflow:hidden;text-overflow:ellipsis}
:root[data-theme="dark"] .kit{color:var(--ink)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .kit{color:var(--ink)}}
td.name{font-weight:700;overflow:hidden;text-overflow:ellipsis}
td.name .sub{display:block;font-weight:400;font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
td.flag{text-align:center;font-size:20px;line-height:1}
td.flag .cc{font-size:11px;font-family:var(--font-mono);color:var(--muted)}
.hgb{display:inline-block;font-family:var(--font-mono);font-size:12px;font-weight:600;color:var(--green);background:var(--green-bg);border:1px solid var(--green-line);border-radius:6px;padding:4px 7px;direction:ltr;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.test{display:inline-block;border-radius:999px;padding:5px 10px;font-size:12px;font-weight:600;white-space:nowrap;direction:ltr;background:var(--pill-grey);color:var(--ink);max-width:100%;overflow:hidden;text-overflow:ellipsis}
.test .ts{display:none}
.test.t700{background:var(--pill-teal);color:var(--pill-teal-ink)}
.test.tbig{background:var(--pill-blue);color:var(--pill-blue-ink)}
.test.twgs{background:var(--pill-blue);color:var(--pill-blue-ink)}
.det td{background:var(--soft);padding:14px 16px;cursor:default}
.dblk{display:flex;flex-direction:column;gap:10px;font-size:13px}
.kv b{font-weight:600}
.tag{display:inline-block;background:var(--green-bg);border:1px solid var(--green-line);border-radius:999px;padding:0 8px;font-size:12px;margin-inline-end:4px}
.path{display:flex;flex-wrap:wrap;gap:4px;direction:ltr}
.path a{font-family:var(--font-mono);font-size:11px;color:var(--green);text-decoration:none;border:1px solid var(--green-line);border-radius:5px;padding:1px 6px;cursor:pointer;background:var(--surface)}
.path a.cur{background:var(--green);color:#fff;border-color:var(--green)}
.str{display:grid;grid-template-columns:repeat(auto-fill,minmax(66px,1fr));gap:4px;direction:ltr}
.str .m{display:flex;flex-direction:column;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:3px 2px}
.str .m b{font-size:10px;font-weight:500;color:var(--muted);font-family:var(--font-mono)}
.str .m span{font-family:var(--font-mono);font-size:13px;font-weight:600}
.empty{padding:36px 16px;text-align:center;color:var(--muted)}

.pager{display:flex;justify-content:center;align-items:center;gap:14px}
.pgb{font:inherit;font-size:13px;font-weight:600;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:8px 18px;cursor:pointer;color:var(--ink);box-shadow:var(--shadow)}
.pgb:disabled{opacity:.4;cursor:default}
.foot{text-align:center;font-size:12px;color:var(--muted);margin:4px 0 0}

/* desktop: panels drop under the filter row */
@media (min-width:701px){
  .panel{margin-top:-4px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* phone */
@media (max-width:700px){
  .colpop{inset-inline-start:auto;inset-inline-end:0}
  .page{padding:14px 8px 32px;gap:12px}
  .mark{font-size:34px}
  .dds{grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}
  .dd{grid-column:span 2;padding:10px 10px;gap:6px}
  .dd:nth-child(4),.dd:nth-child(5){grid-column:span 3}
  .dd>svg:first-child{width:18px;height:18px}
  .dd{padding:11px 12px;font-size:13.5px}
  .backdrop.show{display:block;position:fixed;inset:0;background:rgba(15,25,28,.40);z-index:40}
  .panel.open{position:fixed;inset:auto 0 0 0;z-index:50;max-height:88vh;overflow-y:auto;border-radius:18px 18px 0 0;border:0;padding:12px 14px 0;animation:up .18s ease-out}
  @keyframes up{from{transform:translateY(24px);opacity:.7}to{transform:none;opacity:1}}
  .pfoot{padding-bottom:calc(12px + env(safe-area-inset-bottom))}
  .go{flex:1;padding:12px}
  .panel input[type=search]{font-size:16px}
  .tree,.checks,.tchips,.plgroups{max-height:none}
  .card{border-radius:14px}
  thead th{padding:10px 6px;font-size:11.5px}
  td{padding:12px 6px;font-size:13px}
  .c-kit{width:23%}.c-name{width:30%}.c-ct{width:11%}.c-hg{width:20%}.c-test{width:16%}
  .kit{font-size:11px;padding:4px 5px}
  .hgb{font-size:10.5px;padding:3px 5px}
  .test{font-size:10.5px;padding:4px 7px}
  .test .tl{display:none}.test .ts{display:inline}
  .hgb{white-space:normal;word-break:break-all;line-height:1.35}
  td.name .sub{display:none}
  .tools{width:100%;justify-content:space-between}
}
@media (max-width:380px){
  .c-test{display:none}
  td.ctest{display:none}
  .c-kit{width:26%}.c-name{width:34%}.c-hg{width:26%}
}

/* column visibility */
.colctl{position:relative}
.colbtn{display:inline-flex;align-items:center;gap:6px;font:inherit;font-size:12.5px;font-weight:600;color:var(--teal);background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:5px 12px;cursor:pointer}
.colbtn svg{width:16px;height:16px}
.colbtn[aria-expanded="true"]{border-color:var(--accent)}
.colpop{position:absolute;top:calc(100% + 6px);inset-inline-start:0;z-index:35;background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:0 10px 30px rgba(20,40,45,.14);padding:6px;min-width:200px}
.colpop button{all:unset;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;box-sizing:border-box;padding:9px 10px;border-radius:8px;font-size:13.5px}
.colpop button:hover,.colpop button:focus-visible{background:var(--soft)}
.colpop button svg{width:20px;height:20px;color:var(--teal)}
.colpop button[aria-pressed="false"]{color:var(--muted)}
.colpop button[aria-pressed="false"] svg{color:var(--muted)}
.tscroll{overflow-x:auto}
table.wide{table-layout:auto;min-width:100%}
table.wide th,table.wide td{white-space:nowrap}
th.mk{font-family:var(--font-mono);font-size:10.5px;text-align:center;padding:10px 4px;writing-mode:vertical-rl;transform:rotate(180deg);min-width:30px;height:84px;vertical-align:bottom}
td.mk{font-family:var(--font-mono);font-size:12px;text-align:center;padding:12px 4px;font-weight:600}
td.mk.e{color:var(--muted);font-weight:400}