/* ═══════════ TOKENS ═══════════ */
:root{
  --bg:#07060a;--bg2:#0f0d14;--bg3:#181520;
  --border:rgba(255,255,255,0.07);--border2:rgba(255,255,255,0.13);
  --text:#ede5d4;--text2:#9a9080;--text3:#5a5248;
  --font-d:'Cormorant Garamond',serif;--font-b:'Spectral',serif;--font-m:'JetBrains Mono',monospace;
  --ante:#c084fc;--patr:#c9a96e;--evnt:#e0a458;
  --juda:#6eb5c9;--cath:#e07a6a;--prot:#f4a261;
  --evan:#e9c46a;--lds:#a08bc9;--jeh:#70c1b3;
  --orth:#d4a5a5;--isla:#6ec998;--sunn:#52b788;
  --shia:#74c69d;--sufi:#b7e4c7;--bom:#ff9f43;--othe:#7a7a7a;
  --hdr-h:52px;
  --filter-h:40px;
  --leg-h:36px;
  --radius-sheet:18px;
}

/* ═══════════ RESET ═══════════ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{height:100%;height:100dvh}
body{height:100%;height:100dvh;overflow:hidden;background:var(--bg);color:var(--text);
  font-family:var(--font-b);display:flex;flex-direction:column}

/* ═══════════ KEYFRAMES ═══════════ */
@keyframes fadeUp{
  from{opacity:0;transform:translateY(12px)}
  to{opacity:1;transform:translateY(0)}
}
@keyframes slideUp{
  from{transform:translateY(100%)}
  to{transform:translateY(0)}
}
@keyframes fadeIn{
  from{opacity:0}to{opacity:1}
}

/* ═══════════ HEADER ═══════════ */
.hdr{
  flex-shrink:0;height:var(--hdr-h);padding:0 1.4rem;
  border-bottom:1px solid var(--border);
  background:linear-gradient(180deg,rgba(201,169,110,0.06) 0%,transparent 100%);
  display:flex;align-items:center;gap:1rem
}
.hdr-title{
  font-family:var(--font-d);font-size:clamp(1rem,2.2vw,1.7rem);
  font-weight:300;letter-spacing:.04em;color:var(--patr);line-height:1;white-space:nowrap
}
.hdr-title em{font-style:italic;color:var(--text)}
.hdr-controls{margin-left:auto;display:flex;align-items:center;gap:.4rem}
.zoom-btn{
  width:28px;height:28px;border-radius:50%;border:1px solid var(--border2);
  background:var(--bg2);color:var(--text2);cursor:pointer;font-size:14px;
  display:flex;align-items:center;justify-content:center;
  transition:all .15s;user-select:none;touch-action:manipulation
}
.zoom-btn:hover,.zoom-btn:active{background:var(--bg3);color:var(--text)}
.zoom-lbl{
  font-family:var(--font-m);font-size:.6rem;color:var(--text3);
  min-width:34px;text-align:center
}

/* legend toggle — hidden on desktop */
.leg-toggle-btn{
  display:none;align-items:center;gap:.35rem;
  padding:.3rem .6rem;border-radius:20px;border:1px solid var(--border);
  background:transparent;color:var(--text3);cursor:pointer;
  font-family:var(--font-m);font-size:.58rem;letter-spacing:.06em;
  transition:all .15s;touch-action:manipulation;flex-shrink:0
}
.leg-toggle-btn:active{background:var(--bg3)}
.leg-toggle-btn.active{border-color:var(--border2);color:var(--text2)}
.leg-toggle-dots{display:flex;gap:3px;align-items:center}
.leg-toggle-dots span{width:5px;height:5px;border-radius:50%;display:block}

/* ═══════════ FILTER BAR ═══════════ */
.filter-bar{
  flex-shrink:0;height:var(--filter-h);display:flex;gap:.25rem;
  padding:0 1.4rem;border-bottom:1px solid var(--border);
  overflow-x:auto;background:var(--bg2);align-items:center;
  scrollbar-width:none
}
.filter-bar::-webkit-scrollbar{display:none}
.filter-lbl{
  font-family:var(--font-m);font-size:.55rem;color:var(--text3);
  letter-spacing:.08em;white-space:nowrap;margin-right:.2rem;flex-shrink:0
}
.ftab{
  font-family:var(--font-m);font-size:.57rem;letter-spacing:.05em;
  padding:.22rem .6rem;border-radius:20px;border:1px solid var(--border);
  color:var(--text3);background:transparent;cursor:pointer;white-space:nowrap;
  transition:all .15s;display:flex;align-items:center;gap:.28rem;
  flex-shrink:0;touch-action:manipulation;min-height:30px
}
.ftab:hover{border-color:var(--border2);color:var(--text2)}
.ftab.on{color:#000;border-color:transparent;font-weight:500}
.ftab-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0}

/* ═══════════ LEGEND BAR ═══════════ */
.leg-bar{
  flex-shrink:0;display:flex;flex-wrap:wrap;gap:.18rem .8rem;
  padding:.45rem 1.4rem;border-bottom:1px solid var(--border);background:var(--bg)
}
.leg{
  display:flex;align-items:center;gap:.3rem;font-size:.57rem;
  font-family:var(--font-m);letter-spacing:.05em;color:var(--text3)
}
.leg-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0}
.leg-sep{width:1px;height:12px;background:var(--border);margin:0 .15rem}

/* ═══════════ CANVAS ═══════════ */
.canvas-wrap{flex:1;min-height:0;position:relative;overflow:hidden}
#tl-canvas{width:100%;height:100%;overflow:auto;cursor:grab;user-select:none;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,0.08) var(--bg2)}
#tl-canvas:active{cursor:grabbing}
#tl-canvas::-webkit-scrollbar{width:4px;height:4px}
#tl-canvas::-webkit-scrollbar-track{background:var(--bg2)}
#tl-canvas::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.1);border-radius:3px}
svg#tl{display:block}

.hint-lbl{
  position:absolute;bottom:.9rem;left:50%;transform:translateX(-50%);
  font-family:var(--font-m);font-size:.52rem;letter-spacing:.09em;
  color:var(--text3);white-space:nowrap;pointer-events:none;
  background:rgba(7,6,10,0.7);padding:.2rem .6rem;border-radius:20px;
  border:1px solid var(--border)
}

/* minimap */
#minimap{
  position:absolute;bottom:.9rem;right:.9rem;width:150px;height:24px;
  background:rgba(0,0,0,0.65);border:1px solid var(--border2);
  border-radius:5px;overflow:hidden;cursor:pointer
}
#minimap-vp{
  position:absolute;top:0;height:100%;background:rgba(255,255,255,0.12);
  border:1px solid rgba(255,255,255,0.3);border-radius:3px;pointer-events:none
}

/* floating zoom — hidden on desktop */
.zoom-overlay{
  display:none;position:absolute;bottom:1rem;left:1rem;
  flex-direction:column;gap:.3rem;align-items:center;z-index:100
}
.zoom-fab{
  width:38px;height:38px;border-radius:50%;border:1px solid rgba(255,255,255,0.15);
  background:rgba(13,11,20,0.85);backdrop-filter:blur(8px);
  color:var(--text2);font-size:18px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  touch-action:manipulation;user-select:none;
  box-shadow:0 2px 12px rgba(0,0,0,0.6);transition:all .12s
}
.zoom-fab:active{background:var(--bg3);color:var(--text);transform:scale(.94)}
.zoom-fab-lbl{
  font-family:var(--font-m);font-size:.58rem;color:var(--text3);
  text-align:center;min-width:38px;letter-spacing:.05em
}
.zoom-fab-reset{font-size:14px;opacity:.7}

/* ═══════════ OVERLAY ═══════════ */
#overlay{position:fixed;inset:0;z-index:2999;display:none;background:rgba(0,0,0,0)}
#overlay.show{display:block}

/* ═══════════ TOOLTIP (desktop) ═══════════ */
.tt-drag-handle{display:none}
#tt{
  position:fixed;z-index:3000;width:420px;max-width:92vw;
  background:#13111a;border:1px solid rgba(255,255,255,0.12);border-radius:14px;
  box-shadow:0 28px 90px rgba(0,0,0,0.85),0 0 0 1px rgba(255,255,255,0.03);
  display:none;flex-direction:column;max-height:82vh
}
#tt.show{display:flex;animation:fadeUp .18s ease}
.tt-hdr{
  padding:.95rem 1.2rem .8rem;border-bottom:1px solid rgba(255,255,255,0.06);
  flex-shrink:0;position:relative
}
.tt-badge{display:flex;align-items:center;gap:.4rem;margin-bottom:.26rem;flex-wrap:wrap}
.tt-bdot{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.tt-bcat{font-family:var(--font-m);font-size:.57rem;letter-spacing:.1em;text-transform:uppercase}
.tt-bdate{font-family:var(--font-m);font-size:.57rem;color:var(--text3);margin-left:auto}
.tt-title{font-family:var(--font-d);font-size:1.28rem;font-weight:400;line-height:1.2;color:var(--text)}
.tt-life{font-family:var(--font-m);font-size:.57rem;color:var(--text3);margin-top:.26rem;letter-spacing:.04em}
.tt-close{
  position:absolute;top:.75rem;right:.75rem;width:24px;height:24px;border-radius:50%;
  background:rgba(255,255,255,0.07);border:none;cursor:pointer;color:var(--text2);
  font-size:12px;display:flex;align-items:center;justify-content:center;
  transition:background .15s;touch-action:manipulation
}
.tt-close:hover,.tt-close:active{background:rgba(255,255,255,0.16)}
.tt-body{padding:.8rem 1.2rem;overflow-y:auto;flex:1;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,0.08) transparent}
.tt-body::-webkit-scrollbar{width:3px}
.tt-body::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.1);border-radius:2px}
.tt-desc{font-size:.82rem;line-height:1.82;color:var(--text2);margin-bottom:.9rem}
.tt-lds{
  background:rgba(160,139,201,0.08);border-left:2px solid var(--lds);
  border-radius:0 8px 8px 0;padding:.6rem .9rem;margin-bottom:.8rem
}
.tt-lds-lbl{font-family:var(--font-m);font-size:.54rem;letter-spacing:.1em;color:var(--lds);text-transform:uppercase;margin-bottom:.26rem}
.tt-lds-txt{font-size:.79rem;line-height:1.78;color:#c4b8e0;font-style:italic}
.tt-bom{
  background:rgba(255,159,67,0.07);border-left:2px solid var(--bom);
  border-radius:0 8px 8px 0;padding:.6rem .9rem;margin-bottom:.8rem
}
.tt-bom-lbl{font-family:var(--font-m);font-size:.54rem;letter-spacing:.1em;color:var(--bom);text-transform:uppercase;margin-bottom:.26rem}
.tt-bom-txt{font-size:.79rem;line-height:1.78;color:#ffd6a5;font-style:italic}
.tt-foot{
  padding:.5rem 1.2rem .85rem;border-top:1px solid rgba(255,255,255,0.04);
  display:flex;flex-wrap:wrap;gap:.25rem;flex-shrink:0
}
.tt-tag{
  font-family:var(--font-m);font-size:.54rem;letter-spacing:.05em;
  padding:.16rem .46rem;border-radius:20px;border:1px solid;opacity:.6
}

/* ═══════════ MOBILE (≤ 640px) ═══════════ */
@media(max-width:640px){
  :root{--hdr-h:48px;--filter-h:38px}

  /* full dynamic viewport height */
  html{height:100dvh}
  body{height:100dvh;height:100%}

  /* ── header ── */
  .hdr{padding:0 .9rem;gap:.5rem}
  .hdr-title{font-size:1.05rem;letter-spacing:.02em}
  /* hide desktop zoom controls on mobile */
  .hdr-controls{display:none}
  /* show legend toggle */
  .leg-toggle-btn{display:flex}

  /* ── filter bar ── */
  .filter-bar{padding:0 .8rem;gap:.18rem}
  .filter-lbl{font-size:.52rem}
  .ftab{font-size:.58rem;padding:.24rem .52rem;min-height:28px}

  /* ── legend: hidden by default, shown on toggle ── */
  .leg-bar{
    display:none;max-height:0;overflow:hidden;
    transition:max-height .25s ease,padding .25s ease;
    padding:0 .9rem;
    flex-wrap:wrap;gap:.18rem .65rem
  }
  .leg-bar.leg-open{
    display:flex;max-height:200px;padding:.4rem .9rem;
    border-bottom:1px solid var(--border);
    animation:fadeIn .2s ease
  }
  .leg{font-size:.54rem;white-space:nowrap}
  .leg-sep{flex-shrink:0}

  /* ── canvas fills all remaining space ── */
  .canvas-wrap{flex:1;min-height:0}
  .hint-lbl{display:none}

  /* ── floating zoom controls ── */
  .zoom-overlay{display:flex}
  /* sync desktop zoom label with mobile one */
  #zLbl{display:none}

  /* ── minimap ── */
  #minimap{bottom:.55rem;right:.55rem;width:100px;height:18px}

  /* ── tooltip as bottom sheet ── */
  #overlay.show{background:rgba(0,0,0,0.45);animation:fadeIn .2s ease}

  .tt-drag-handle{
    display:block;width:36px;height:4px;border-radius:2px;
    background:rgba(255,255,255,0.2);margin:.7rem auto .2rem;flex-shrink:0
  }

  #tt{
    width:100%;max-width:100%;
    border-radius:var(--radius-sheet) var(--radius-sheet) 0 0;
    border-left:none;border-right:none;border-bottom:none;
    border-top:1px solid rgba(255,255,255,0.1);
    position:fixed;bottom:0;left:0;top:auto;
    max-height:75dvh;
    box-shadow:0 -12px 60px rgba(0,0,0,0.8);
    padding-bottom:env(safe-area-inset-bottom, 0px)
  }
  #tt.show{
    display:flex;
    animation:slideUp .22s cubic-bezier(0.22,1,0.36,1)
  }
  .tt-hdr{padding:.6rem 1.1rem .75rem}
  .tt-title{font-size:1.18rem;line-height:1.18}
  .tt-bdate{font-size:.55rem}
  .tt-close{
    width:28px;height:28px;top:.6rem;right:.8rem;font-size:12px;
    background:rgba(255,255,255,0.1)
  }
  .tt-body{padding:.65rem 1.1rem}
  .tt-desc{font-size:.83rem;line-height:1.75}
  .tt-lds-txt,.tt-bom-txt{font-size:.8rem}
  .tt-foot{padding:.45rem 1.1rem .7rem;gap:.22rem}
  .tt-tag{font-size:.54rem;padding:.15rem .44rem}
}

/* ═══════════ TABLET (641–900px) ═══════════ */
@media(min-width:641px) and (max-width:900px){
  .hdr-title{font-size:1.3rem}
  #tt{width:380px;max-height:78vh}
}