/* Secondary name-style picker stays quieter than the primary inspector menus. */
.inspector .inspector-subsection{
  margin:13px 0 0;
  padding-top:13px;
  border:0;
  border-top:1px solid color-mix(in srgb,var(--line) 66%,transparent);
  background:transparent;
}
.inspector .inspector-subsection-title{
  display:block;
  margin:0 0 9px;
  padding:0 2px;
  color:color-mix(in srgb,var(--muted) 90%,var(--text));
  font-size:10px;
  font-weight:680;
  line-height:1.3;
}
.inspector .person-name-style-options{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
  padding:0 0 1px;
}
.inspector .person-name-style-options>button{
  display:grid;
  min-width:0;
  min-height:66px;
  padding:8px 6px 7px;
  border:1px solid color-mix(in srgb,var(--line) 82%,transparent);
  border-radius:8px;
  background:color-mix(in srgb,var(--panel) 58%,transparent);
  place-items:center;
  align-content:center;
  gap:7px;
  color:var(--muted);
  cursor:pointer;
  transition:border-color .16s ease,background .16s ease,color .16s ease,transform .16s ease;
}
.inspector .person-name-style-options>button:hover{
  border-color:color-mix(in srgb,var(--accent) 52%,var(--line));
  background:color-mix(in srgb,var(--accent) 7%,var(--panel));
  color:var(--text);
  transform:translateY(-1px);
}
.inspector .person-name-style-options>button.active{
  border-color:var(--accent);
  background:color-mix(in srgb,var(--accent) 12%,var(--panel));
  color:var(--text);
  box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 11%,transparent);
}
.inspector .person-name-style-options strong{
  overflow:hidden;
  max-width:100%;
  font-size:9px;
  font-weight:650;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.inspector .person-name-preview{
  display:grid;
  min-width:62px;
  min-height:24px;
  padding:3px 11px;
  place-items:center;
  color:#302b38;
}
.inspector .person-name-preview>i{display:block;width:27px;height:3px;border-radius:2px;background:currentColor;opacity:.82}
.inspector .preview-pill{border:1px solid #ddd8e5;border-radius:999px;background:#fff;box-shadow:0 3px 8px #382d5418}
.inspector .preview-black-pill{border:1px solid #ffffff24;border-radius:999px;background:#111217;color:#fff;box-shadow:0 4px 10px #0005}
.inspector .preview-box{border:1px solid #d2cdd9;border-radius:0;background:#fff;box-shadow:0 3px 8px #382d5414}
.inspector .preview-dark{border:1px solid #ffffff1c;border-radius:2px;background:#24232a;color:#fff;box-shadow:0 3px 8px #0003}
.inspector .preview-plain{padding-inline:5px;background:transparent;color:var(--text)}
.inspector .preview-glass{border:1px solid color-mix(in srgb,var(--accent) 28%,#fff);border-radius:7px;background:color-mix(in srgb,var(--panel) 58%,transparent);color:var(--text);box-shadow:0 4px 10px #0002;backdrop-filter:blur(7px)}

/* Canvas name treatments apply only to avatar/photo person shapes. */
#node-layer .node.person.circle-avatar h3{
  box-sizing:border-box;
  width:max-content!important;
  min-width:var(--person-name-min-width,64px);
  max-width:min(var(--person-name-max-width,220px),calc(100% + 88px))!important;
  position:relative;
  left:50%;
  margin-inline:0!important;
  transform:translateX(-50%);
  padding-inline:var(--person-name-padding-x,16px)!important;
  padding-block:var(--person-name-padding-y,3px)!important;
  font-size:var(--person-name-font-size,13px)!important;
  line-height:var(--person-name-line-height,17px)!important;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
#node-layer .node.person.circle-avatar.person-name-pill h3{
  border-color:#ddd8e5!important;
  background:#fff!important;
  color:#302b38!important;
  box-shadow:0 5px 14px #30254620!important;
}
#node-layer .node.person.circle-avatar.person-name-black-pill h3{
  border-color:#ffffff24!important;
  border-radius:999px!important;
  background:#111217f2!important;
  color:#fff!important;
  box-shadow:0 6px 16px #0008!important;
  text-shadow:0 1px 2px #000;
}
#node-layer .node.person.circle-avatar.person-name-box h3{
  border-color:#d8d3df!important;
  border-radius:0!important;
  background:#fff!important;
  color:#302b38!important;
  box-shadow:0 5px 14px #30254624!important;
}
#node-layer .node.person.circle-avatar.person-name-dark h3{
  border-color:#ffffff1f!important;
  border-radius:2px!important;
  background:#202027ee!important;
  color:#fff!important;
  box-shadow:0 5px 14px #0006!important;
}
#node-layer .node.person.circle-avatar.person-name-plain h3{
  min-width:0;
  padding-inline:5px!important;
  border-color:transparent!important;
  border-radius:0!important;
  background:transparent!important;
  color:var(--text)!important;
  box-shadow:none!important;
  text-shadow:0 1px 3px var(--panel),0 0 8px var(--panel);
}
#node-layer .node.person.circle-avatar.person-name-glass h3{
  border:1px solid color-mix(in srgb,var(--node-color) 30%,#fff)!important;
  border-radius:7px!important;
  background:color-mix(in srgb,var(--panel) 62%,transparent)!important;
  color:var(--text)!important;
  box-shadow:0 5px 16px #0003!important;
  backdrop-filter:blur(8px) saturate(1.15);
}
body[data-theme="paper"] #node-layer .node.person.circle-avatar.person-name-plain h3{color:#332719!important;text-shadow:0 1px 3px #eee1c9,0 0 8px #eee1c9}
body[data-theme="blueprint"] #node-layer .node.person.circle-avatar.person-name-plain h3{color:#eff8ff!important;text-shadow:0 1px 3px #071725,0 0 8px #071725}