/* Khorasia Aambo - Chart: depth control, boxed layout, radial canopy, zoom controls. */

/* ---------- Chart depth control ---------- */
.depth-ctl{display:flex;align-items:center;gap:9px}
.depth-ctl label{font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);white-space:nowrap}
.depth-ctl output{
  min-width:58px;font-family:var(--serif);font-size:14px;color:var(--sindoor);font-weight:600;
  text-align:left;white-space:nowrap;
}
#depth-range{-webkit-appearance:none;appearance:none;width:clamp(90px,14vw,170px);height:18px;background:none;cursor:pointer}
#depth-range::-webkit-slider-runnable-track{height:2px;background:var(--rule);border-radius:2px}
#depth-range::-moz-range-track{height:2px;background:var(--rule);border-radius:2px}
#depth-range::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:14px;height:14px;border-radius:50%;
  background:var(--sindoor);border:2px solid var(--paper-2);box-shadow:0 0 0 1px var(--sindoor);margin-top:-6px;
}
#depth-range::-moz-range-thumb{
  width:14px;height:14px;border-radius:50%;background:var(--sindoor);
  border:2px solid var(--paper-2);box-shadow:0 0 0 1px var(--sindoor);
}
#depth-range:focus-visible{outline:2px solid var(--sindoor);outline-offset:4px;border-radius:3px}
@media(max-width:620px){.depth-ctl label{display:none}}
@media(max-width:820px){
  #v-chart .panel-hd{gap:8px 10px;padding:11px 13px}
  #v-chart .panel-hd h2{font-size:15px}
  #v-chart .panel-hd .sub{width:100%;order:5}
  .depth-ctl{flex:1 1 100%;order:6}
  #depth-range{flex:1;width:auto}
  .chart-body{height:min(70vh,640px)}
  .zoomer button{width:42px;height:42px;font-size:18px}
  .zoomer{right:10px;bottom:10px;gap:7px}
  .rdot{stroke-width:1.6}
  .nt-en{font-size:14px}.nt-gu{font-size:15px}
}
@media(max-width:520px){.chart-body{height:70vh}}
.zoomer .z-reset{font-size:11px;letter-spacing:.06em}

/* ---------- Chart view ---------- */
.chart-body{position:relative;height:min(70vh,780px);overflow:hidden;background:
  radial-gradient(circle at 1px 1px,rgba(27,26,42,.10) 1px,transparent 0) 0 0/22px 22px,var(--paper-2);
  cursor:grab;
  /* the chart handles its own panning and pinching */
  touch-action:none;-ms-touch-action:none;
  -webkit-user-select:none;user-select:none;
  -webkit-touch-callout:none;
  overscroll-behavior:contain;
}
.chart-body.drag{cursor:grabbing}
#svg{display:block;width:100%;height:100%}
.zoomer{position:absolute;right:12px;bottom:12px;display:flex;flex-direction:column;gap:5px;z-index:5}
.zoomer button{
  width:34px;height:34px;display:grid;place-items:center;background:var(--paper-2);
  border:1px solid var(--rule);border-radius:2px;font-size:15px;box-shadow:var(--shadow);
}
.zoomer button:hover{border-color:var(--sindoor);color:var(--sindoor)}
.nlink{fill:none;stroke:var(--rule);stroke-width:1.2}
.nlink.hl{stroke:var(--sindoor);stroke-width:2}

.nnode:hover .nbox{stroke:var(--sindoor)!important;stroke-width:2.4!important}


.nnode{cursor:pointer}
.nt-en{font-family:var(--serif);font-size:13px;font-weight:500;text-anchor:middle}
.nt-gu{font-family:var(--serif);font-size:14px;text-anchor:middle}


.nt-g{font-family:var(--sans);font-size:8.5px;font-weight:700;letter-spacing:.06em;text-anchor:middle}

.nmore{font-family:var(--sans);font-size:9px;font-weight:700;fill:var(--turmeric);text-anchor:middle}
/* radial whole-tree */
.rlink{fill:none;stroke:var(--line);stroke-width:1.15;opacity:.9}
.rlink.hl{stroke:var(--sindoor);stroke-width:2.2;opacity:1}
.rdot{stroke-width:1.2;cursor:pointer}
.rdot:hover{stroke:var(--sindoor)!important;stroke-width:2.6}

.rdot.sel{stroke-width:2.6}

.rlab{font-family:var(--serif);font-size:9px;fill:var(--ink-2);pointer-events:none;display:none}
#stage.z1 .rlab.t1{display:block}
#stage.z2 .rlab.t1,#stage.z2 .rlab.t2{display:block}
#stage.z1 .rlab.on{display:block!important;fill:var(--sindoor);font-weight:600;font-size:10.5px;paint-order:stroke;stroke:var(--paper-2);stroke-width:3px}
.rcore{font-family:var(--serif);font-size:17px;font-weight:600;fill:var(--sindoor);text-anchor:middle;paint-order:stroke;stroke:var(--paper-2);stroke-width:4px}