/* Connections page (templates/explorer.html, static/explorer.js). Mobile-first, every colour a token.
   Page-specific tokens live on .cx and are redefined for light mode with the same two selectors style.css uses.
   Node-type colours keep the five-colour mapping of the old graph (topic blue, recording violet, scholar and person
   green, Quran/hadith/books orange, principles and the rest amber); the light-mode steps are darker so marks clear
   3:1 on white, checked with the dataviz validator (no adjacent pair below the CVD floor; identity is never colour
   alone: every mark sits under a group heading or beside its label). The authority-map ramp is one hue (blue),
   light to dark in light mode and dark to light in dark mode, each step with the ink that clears 4.5:1 on it. */
.cx{
  --c-topic:#3987E5;--c-rec:#8B5CF6;--c-person:#199E70;--c-source:#D95926;--c-other:#F5C66B;
  --am1:#2A4E82;--am2:#3567AE;--am3:#5B95E2;--am4:#82AFEE;--am5:#B3D2F9;
  --am1-ink:#EEF2F7;--am2-ink:#EEF2F7;--am3-ink:#0B0F17;--am4-ink:#0B0F17;--am5-ink:#0B0F17;
  --cx-bar:#3987E5;--cx-track:rgba(255,255,255,.07);--cx-sel:#F5C66B
}
@media (prefers-color-scheme:light){
  :root:not([data-theme="dark"]) .cx{
    --c-topic:#1D5FBF;--c-rec:#6D28D9;--c-person:#14805A;--c-source:#B83A1B;--c-other:#A87F00;
    --am1:#94B8EC;--am2:#709FE2;--am3:#4C84D6;--am4:#2C68BE;--am5:#1C4D97;
    --am1-ink:#0B0F17;--am2-ink:#0B0F17;--am3-ink:#0B0F17;--am4-ink:#FFFFFF;--am5-ink:#FFFFFF;
    --cx-bar:#1D5FBF;--cx-track:rgba(11,15,23,.07);--cx-sel:#7A4B00
  }
}
:root[data-theme="light"] .cx{
  --c-topic:#1D5FBF;--c-rec:#6D28D9;--c-person:#14805A;--c-source:#B83A1B;--c-other:#A87F00;
  --am1:#94B8EC;--am2:#709FE2;--am3:#4C84D6;--am4:#2C68BE;--am5:#1C4D97;
  --am1-ink:#0B0F17;--am2-ink:#0B0F17;--am3-ink:#0B0F17;--am4-ink:#FFFFFF;--am5-ink:#FFFFFF;
  --cx-bar:#1D5FBF;--cx-track:rgba(11,15,23,.07);--cx-sel:#7A4B00
}
.cx [hidden]{display:none!important}
.cx .t-topic{--tc:var(--c-topic)}.cx .t-recording{--tc:var(--c-rec)}
.cx .t-scholar,.cx .t-person{--tc:var(--c-person)}
.cx .t-quran,.cx .t-hadith,.cx .t-book,.cx .t-text{--tc:var(--c-source)}
.cx .t-principle,.cx .t-event,.cx .t-term,.cx .t-org{--tc:var(--c-other)}
.cx-dot{display:inline-block;flex:0 0 auto;width:10px;height:10px;border-radius:50%;background:var(--tc,var(--c-other))}

/* ---- head and lookup ---- */
.cx-head{margin:24px 0 16px;display:flex;flex-direction:column;gap:6px}.cx-head h1{margin:0}
.cx-lead{margin:0;max-width:var(--measure);color:var(--ink2);font-size:calc(16px * var(--scale));line-height:1.5}
.cx-lead2{margin:0 0 14px;max-width:var(--measure);color:var(--ink2);font-size:14px;line-height:1.5}
.cx-search{position:relative;display:flex;align-items:center;max-width:760px;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:0 6px 0 14px;box-shadow:0 12px 40px var(--shadow)}
.cx-search:focus-within{border-color:var(--cyan)}
.cx-search-i{flex:0 0 auto;color:var(--mute)}
.cx-search input{flex:1;min-width:0;background:transparent;border:0;outline:0;color:var(--ink);font:inherit;font-size:16px;padding:14px 10px;min-height:52px}
.cx-search input::placeholder{color:var(--mute)}
.cx-search input::-webkit-search-decoration{-webkit-appearance:none}
@media (max-width:479px){.cx-search input::placeholder{font-size:14px}}
.cx-opts{position:absolute;top:calc(100% + 6px);inset-inline:0;z-index:30;margin:0;padding:6px;list-style:none;background:var(--popbg);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);border:1px solid var(--glassline);border-radius:14px;box-shadow:0 30px 80px var(--shadow2);max-height:min(60vh,440px);overflow-y:auto}
.cx-opts li{display:flex;align-items:center;gap:10px;min-height:var(--tap);padding:8px 10px;border-radius:10px;cursor:pointer}
.cx-opts li[aria-selected="true"],.cx-opts li:hover{background:var(--pillbg);box-shadow:inset 0 0 0 1px var(--pillline)}
.cx-opts .o-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.cx-opts .o-l{color:var(--ink);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cx-opts .o-l strong{color:var(--cyan2)}
.cx-opts .o-s{font-size:12px;color:var(--mute);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cx-opts .o-n{font-size:12px;color:var(--ink2);font-variant-numeric:tabular-nums;white-space:nowrap}
.cx-opts .o-none{cursor:default;color:var(--ink2);font-size:14px}.cx-opts .o-none:hover{background:none;box-shadow:none}

/* ---- starting points ---- */
.cx-starts{display:grid;grid-template-columns:1fr;gap:18px;margin:22px 0 0}
.cx-h3{font-family:Inter,system-ui,sans-serif;font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--mute);margin:0 0 8px}
.cx-chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.cx-chip{display:inline-flex;align-items:center;gap:8px;max-width:100%;min-height:var(--tap);padding:0 12px;border:1px solid var(--line);border-radius:999px;background:var(--card);color:var(--ink);text-decoration:none;font-size:14px;font-weight:600}
.cx-chip:hover{border-color:var(--cyantint)}.cx-chip[aria-current="true"]{border-color:var(--cyan);background:var(--cyanbg)}
.cx-chip-l{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:28ch}
.cx-chip b{font-weight:600;font-size:12px;color:var(--mute);font-variant-numeric:tabular-nums}
.cx-hint{margin:0;font-size:13px;color:var(--mute)}
.cx a:focus-visible,.cx button:focus-visible,.cx summary:focus-visible,.cx [tabindex]:focus-visible{outline:2px solid var(--cyan2);outline-offset:2px}

/* ---- the view of one node ---- */
.cx-view{margin:22px 0 0;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:16px;display:flex;flex-direction:column;gap:16px;scroll-margin-top:calc(var(--headh) + 12px)}
.cx-view:focus{outline:none}
.cx-vh{display:flex;flex-direction:column;gap:6px}
.cx-kick{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--ink2);margin:0}
.cx-vh h2{margin:0;font-size:clamp(22px,5.5vw,30px);line-height:1.2}
.cx-crumb{margin:0;font-size:13px;color:var(--mute)}
.cx-sum{margin:0;font-size:15px;color:var(--ink2)}
.cx-acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.cx-btn{display:inline-flex;align-items:center;min-height:40px;padding:0 12px;font:inherit;font-size:13px;font-weight:700;color:var(--ink);background:var(--bg);border:1px solid var(--line);border-radius:10px;cursor:pointer;text-decoration:none}
.cx-btn:hover{border-color:var(--cyantint)}
/* year strip: one column per year of the archive, height = segments that year */
.cx-years{display:flex;flex-direction:column;gap:6px}
.cx-yl{display:flex;justify-content:space-between;gap:8px;font-size:12px;color:var(--mute);align-items:baseline}
.cx-yl b{color:var(--ink);font-weight:700}
.cx-ys{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:3px;align-items:end;height:72px}
.cx-y{display:flex;flex-direction:column;justify-content:flex-end;align-items:stretch;height:100%;min-width:0;padding:0;margin:0;font:inherit;background:none;border:0;cursor:pointer;color:var(--mute);border-radius:4px}
.cx-y i{display:block;min-height:2px;background:var(--cx-bar);border-radius:3px 3px 0 0}
.cx-y.z i{background:var(--line)}.cx-y.z{cursor:default}
.cx-y span{font-size:10px;line-height:1;padding-top:4px;border-top:1px solid var(--line);font-variant-numeric:tabular-nums;overflow:hidden;white-space:nowrap}
.cx-y:not(.z):hover i{background:var(--cyan)}
.cx-y[aria-pressed="true"] i{background:var(--cx-sel)}.cx-y[aria-pressed="true"] span{color:var(--ink);font-weight:700}
.cx-ys.on .cx-y[aria-pressed="false"] i{opacity:.35}
.cx-y .ys{display:none}
.cx-filter{margin:0;font-size:13px;color:var(--ink2);display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.cx-body{display:flex;flex-direction:column;gap:20px;min-width:0}
.cx-groups{display:flex;flex-direction:column;gap:20px;min-width:0}
.cx-group h3{margin:0 0 6px;font-size:16px;display:flex;align-items:center;gap:8px}
.cx-group h3 small{font-family:Inter,system-ui,sans-serif;font-size:12px;font-weight:600;color:var(--mute)}
.cx-rank{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.cx-r{border-top:1px solid var(--line)}.cx-r:first-child{border-top:0}
.cx-rl{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"name n" "bar bar";align-items:center;column-gap:10px;padding:6px 0}
.cx-rn{grid-area:name;display:flex;align-items:center;gap:8px;min-width:0;min-height:36px;padding:0;font:inherit;font-size:14px;font-weight:600;color:var(--ink);background:none;border:0;text-align:start;cursor:pointer}
.cx-rn span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cx-rn:hover span{color:var(--cyan2);text-decoration:underline}
.cx-rb{grid-area:bar;display:block;height:6px;border-radius:3px;background:var(--cx-track);overflow:hidden}
.cx-rb i{display:block;height:100%;background:var(--tc,var(--cx-bar));border-radius:3px}
.cx-rc{grid-area:n;display:inline-flex;align-items:center;gap:6px;min-height:36px;min-width:44px;justify-content:center;padding:0 10px;font:inherit;font-size:13px;font-weight:700;color:var(--ink);background:var(--bg);border:1px solid var(--line);border-radius:999px;cursor:pointer;font-variant-numeric:tabular-nums}
.cx-rc:hover{border-color:var(--cyantint)}.cx-rc[aria-expanded="true"]{background:var(--cyan);border-color:var(--cyan);color:var(--oncyan)}
.cx-rc svg{transition:transform .15s}.cx-rc[aria-expanded="true"] svg{transform:rotate(180deg)}
.cx-more{margin-top:6px}
/* evidence lists: the segments behind a number */
.cx-ev{list-style:none;margin:4px 0 10px;padding:0 0 0 12px;border-inline-start:2px solid var(--cyanline);display:flex;flex-direction:column;gap:10px}
.cx-ev li{display:flex;flex-direction:column;gap:3px;min-width:0}
.cx-ev a{font-size:14px;font-weight:600;line-height:1.4;text-decoration:none;color:var(--cyan2)}.cx-ev a:hover{text-decoration:underline}
.cx-ev-meta{display:flex;flex-wrap:wrap;align-items:center;gap:2px 10px;font-size:12px;color:var(--mute)}
.cx-ev-meta>span:first-child{color:var(--ink2);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.cx-ev .tier{font-size:11px;padding:1px 6px}
.cx-own summary{cursor:pointer;font-weight:700;font-size:14px;min-height:var(--tap);display:flex;align-items:center}
/* the drawing: hidden on phones, where the lists carry the meaning */
.cx-fig{display:none;margin:0;min-width:0}
.cx-fig svg{display:block;width:100%;height:auto;overflow:visible}
.cx-fig figcaption{font-size:12px;color:var(--mute);margin-top:6px;line-height:1.45}
.cx-fig .e{fill:none;stroke:var(--tc);stroke-opacity:.45;stroke-linecap:round}
.cx-fig .nd{cursor:pointer}.cx-fig .nd circle{fill:var(--tc);stroke:var(--card);stroke-width:2}
.cx-fig .nd text{fill:var(--ink2);font:600 12px Inter,system-ui,sans-serif}
.cx-fig .nd text tspan{fill:var(--mute);font-weight:500}
.cx-fig .nd:hover text,.cx-fig .nd:focus text{fill:var(--ink)}.cx-fig .nd:hover .e{stroke-opacity:.9}
.cx-fig .nd:hover circle{stroke:var(--ink)}
.cx-fig .fc circle{fill:var(--tc);stroke:var(--card);stroke-width:3}
.cx-fig .fc rect{fill:var(--card);stroke:var(--line)}
.cx-fig .fc text{fill:var(--ink);font:700 13px Inter,system-ui,sans-serif}
.cx-legend{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:12px;color:var(--ink2);margin-top:6px}.cx-legend span{display:inline-flex;align-items:center;gap:6px}
@media (min-width:600px){.cx-fig{display:block}}

/* ---- sections ---- */
.cx-sec{margin-top:40px}.cx-sec>h2{margin:0 0 6px}
/* authority map: a real table, first column sticky so the topic stays in view while the columns scroll */
.cx-am-key{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;font-size:12px;color:var(--ink2);margin:0 0 10px}
.cx-am-sw{display:inline-flex;align-items:center;gap:5px;font-variant-numeric:tabular-nums}.cx-am-sw i{width:16px;height:12px;border-radius:3px;display:inline-block}
.cx-am-scroll{overflow-x:auto;max-width:100%;border:1px solid var(--line);border-radius:14px;background:var(--card);-webkit-overflow-scrolling:touch}
.cx-am-t{border-collapse:separate;border-spacing:0;min-width:0;font-size:13px;font-variant-numeric:tabular-nums}
.cx-am-t th,.cx-am-t td{padding:0;border:0}
.cx-am-t thead th{vertical-align:bottom;border-bottom:1px solid var(--line)}
.cx-am-t th[scope="row"],.cx-am-corner{position:sticky;inset-inline-start:0;z-index:2;background:var(--card);text-align:start;border-inline-end:1px solid var(--line)}
.cx-am-corner{z-index:3}
.cx-am-t th[scope="row"]{width:44vw;max-width:44vw;min-width:150px}
.cx-am-t th[scope="row"] a,.cx-am-t th[scope="row"] button{display:block;width:100%;padding:6px 10px;font:inherit;font-size:13px;font-weight:600;color:var(--ink);text-decoration:none;line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;background:none;border:0;text-align:start;cursor:pointer}
.cx-am-t tbody th[scope="row"] a{white-space:normal;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;padding:4px 10px}
.cx-am-t th[scope="row"] a:hover{color:var(--cyan2);text-decoration:underline}
.cx-am-t tr.sel th[scope="row"] a{color:var(--cyan2)}
.cx-am-t thead button{font:inherit;font-size:12px;font-weight:700;color:var(--ink2);background:none;border:0;cursor:pointer;padding:8px 6px;width:100%;text-align:start}
.cx-am-col{width:40px;min-width:40px}
.cx-am-col button{display:flex;flex-direction:column;align-items:center;gap:6px;padding:8px 0 6px}
.cx-am-col button span{writing-mode:vertical-rl;transform:rotate(180deg);max-height:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.1}
.cx-am-col button::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--tc)}
.cx-am-t thead button:hover,.cx-am-t th[aria-sort] button{color:var(--ink)}
.cx-am-t th[aria-sort="descending"] button span::before,.cx-am-tot[aria-sort="descending"] button::after{content:"\2193 "}
.cx-am-t th[aria-sort="ascending"] button span::before,.cx-am-tot[aria-sort="ascending"] button::after{content:"\2191 "}
.cx-am-corner[aria-sort] button::after{content:" A\2013Z"}
.cx-am-tot{width:52px;text-align:center}
.cx-am-t td{height:38px;text-align:center;border-bottom:1px solid var(--card);border-inline-end:1px solid var(--card)}
.cx-am-t td a{display:flex;align-items:center;justify-content:center;width:100%;height:100%;min-height:38px;text-decoration:none;font-weight:700;color:inherit}
.cx-am-t td a:hover{box-shadow:inset 0 0 0 2px var(--ink)}
.cx-am-t td a[aria-current="true"]{box-shadow:inset 0 0 0 3px var(--cx-sel)}
.cx-am-t td.l1{background:var(--am1);color:var(--am1-ink)}.cx-am-t td.l2{background:var(--am2);color:var(--am2-ink)}
.cx-am-t td.l3{background:var(--am3);color:var(--am3-ink)}.cx-am-t td.l4{background:var(--am4);color:var(--am4-ink)}
.cx-am-t td.l5{background:var(--am5);color:var(--am5-ink)}
.cx-am-key i.l1{background:var(--am1)}.cx-am-key i.l2{background:var(--am2)}.cx-am-key i.l3{background:var(--am3)}.cx-am-key i.l4{background:var(--am4)}.cx-am-key i.l5{background:var(--am5)}
.cx-am-t td.cx-am-rt,.cx-am-t tfoot td{color:var(--ink2);font-weight:700;background:var(--card)}
.cx-am-t tfoot th,.cx-am-t tfoot td{border-top:1px solid var(--line)}
.cx-am-t tbody tr:hover th[scope="row"]{background:var(--hover)}
.cx-panel{margin-top:12px;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px 16px;display:flex;flex-direction:column;gap:8px}
.cx-panel:focus{outline:none}
.cx-panel h3{margin:0;font-size:17px}.cx-panel p{margin:0;font-size:13px;color:var(--ink2)}
/* strongest pairs */
.cx-pairlist{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr;gap:0 28px;border-top:1px solid var(--line)}
.cx-pairlist>li{border-bottom:1px solid var(--line);min-width:0}
.cx-pairlist summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"names n" "bar bar";gap:4px 12px;align-items:center;padding:10px 0;min-height:var(--tap)}
.cx-pairlist summary::-webkit-details-marker{display:none}
.cx-pn{grid-area:names;min-width:0;font-size:14px;font-weight:600;line-height:1.35;color:var(--ink)}
.cx-pa{display:inline-flex;align-items:center;gap:6px}.cx-and{color:var(--mute);font-weight:500}
.cx-pbar{grid-area:bar;display:block;height:6px;border-radius:3px;background:var(--cx-track);overflow:hidden}
.cx-pbar i{display:block;height:100%;background:var(--cx-bar);border-radius:3px}
.cx-pc{grid-area:n;display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:32px;padding:0 10px;border:1px solid var(--line);border-radius:999px;font-size:13px;font-variant-numeric:tabular-nums}
.cx-pairlist details[open] .cx-pc{background:var(--cyan);border-color:var(--cyan);color:var(--oncyan)}
.cx-pairlist summary:hover .cx-pn{color:var(--cyan2)}
/* static bar widths (no style attributes: the CSP forbids them) */
.w5{width:5%}.w10{width:10%}.w15{width:15%}.w20{width:20%}.w25{width:25%}.w30{width:30%}.w35{width:35%}.w40{width:40%}.w45{width:45%}.w50{width:50%}
.w55{width:55%}.w60{width:60%}.w65{width:65%}.w70{width:70%}.w75{width:75%}.w80{width:80%}.w85{width:85%}.w90{width:90%}.w95{width:95%}.w100{width:100%}
.cx-note{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px 16px;max-width:820px}
.cx-note p{margin:0;font-size:14px;color:var(--ink2);line-height:1.55}
.cx-foot{font-size:13px;color:var(--mute);margin-top:16px}
.cx-empty{margin:24px 0;padding:32px 20px;text-align:center;color:var(--ink2);background:var(--card);border:1px solid var(--line);border-radius:16px}

@media (min-width:640px){
  .cx-view{padding:20px 24px}
  .cx-am-t th[scope="row"]{width:auto;max-width:300px;min-width:220px}
  .cx-am-t tbody th[scope="row"] a{display:block;white-space:nowrap;padding:6px 10px}
  .cx-am-col{width:44px;min-width:44px}
  .cx-pairlist{grid-template-columns:repeat(auto-fill,minmax(420px,1fr))}
}
@media (min-width:1000px){
  .cx-starts{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
  .cx-chip-l{max-width:22ch}
  .cx-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,520px);gap:28px;align-items:start}
  .cx-fig{position:sticky;top:calc(var(--headh) + 16px);order:2}
  .cx-groups{order:1}
}
@media (prefers-reduced-motion:reduce){.cx-rc svg{transition:none}}
@media print{.cx-search,.cx-fig,.cx-acts{display:none}}