/* One fixed rhythm for every primary inspector group. */
.inspector #avatar-library-section{margin:0!important}
.inspector #node-form:not([hidden]){display:flex;flex-direction:column;gap:8px;margin:8px 0 0!important}
.inspector #line-form:not([hidden]){display:flex;flex-direction:column;gap:8px;margin:0!important}
.inspector :is(#node-form,#line-form)>.inspector-disclosure,
.inspector #node-info-section.avatar-style-disclosure{margin:0!important}
.inspector :is(.avatar-library-section,#node-form,#line-form)>.inspector-disclosure,
.inspector .avatar-library-section{border-bottom-color:color-mix(in srgb,var(--line) 58%,transparent)!important}

/* A quiet identity color for each primary group. */
.inspector :is(#avatar-library-section,#node-info-section,#node-color-section,#person-style-field,#card-style-section,#node-edit-section){--section-accent:var(--accent)}
.inspector :is(#avatar-library-section,#node-info-section,#node-color-section,#person-style-field,#card-style-section,#node-edit-section)>summary{transition:background .18s ease,color .18s ease,transform .18s ease,box-shadow .18s ease}
.inspector :is(#avatar-library-section,#node-info-section,#node-color-section,#person-style-field,#card-style-section,#node-edit-section)>summary::before{color:var(--section-accent)!important}
.inspector :is(#avatar-library-section,#node-info-section,#node-color-section,#person-style-field,#card-style-section,#node-edit-section):hover>summary{background:color-mix(in srgb,var(--section-accent) 20%,var(--panel2))!important;box-shadow:inset 5px 0 var(--section-accent);color:color-mix(in srgb,var(--text) 90%,var(--section-accent))!important}
.inspector :is(#avatar-library-section,#node-info-section,#node-color-section,#person-style-field,#card-style-section,#node-edit-section):hover{border-bottom-color:color-mix(in srgb,var(--section-accent) 48%,var(--line))!important}

/* Keep AI generation deliberately clickable only on its visible pill. */
.inspector .field-label-row{position:relative;justify-content:flex-start!important;gap:8px!important}
.inspector .node-detail-field{display:block;margin:0;color:color-mix(in srgb,var(--muted) 92%,var(--text));font-size:12px;line-height:1.35}
.inspector #ai-person-bio-btn{
  position:relative;
  z-index:1;
  flex:0 0 auto!important;
  width:max-content!important;
  min-width:0!important;
  max-width:max-content!important;
  margin-left:0!important;
}

/* Compact identity fields: label and value share one deliberate row. */
.inspector #node-info-section>.inspector-disclosure-body>label{
  display:grid;
  grid-template-columns:42px minmax(0,1fr);
  align-items:center;
  gap:10px;
  margin:0 0 10px!important;
}
.inspector #node-info-section>.inspector-disclosure-body>label>span{
  color:var(--muted);
  font-size:11px;
  font-weight:700;
  white-space:nowrap;
}
.inspector #node-info-section>.inspector-disclosure-body>label>input{
  min-height:40px!important;
  height:40px;
  margin:0!important;
  padding:8px 11px!important;
  border-radius:4px!important;
  font-size:13px!important;
}

/* Character and image information read like settled text until the user chooses to edit them. */
.inspector #node-info-section.person-inline-info :is(#field-title,#field-subtitle,#field-content){
  border-color:transparent!important;
  background:transparent!important;
  box-shadow:none!important;
  transition:border-color .16s ease,background .16s ease,box-shadow .16s ease!important;
}
.inspector #node-info-section.person-inline-info :is(#field-title,#field-subtitle){
  min-height:34px!important;
  height:34px!important;
  padding:5px 8px!important;
}
.inspector #node-info-section.person-inline-info #field-content{
  min-height:104px!important;
  margin-top:5px!important;
  padding:8px!important;
}
.inspector #node-info-section.person-inline-info :is(#field-title,#field-subtitle,#field-content):hover:not(:focus){
  border-color:color-mix(in srgb,var(--line) 80%,transparent)!important;
  background:color-mix(in srgb,var(--panel) 32%,transparent)!important;
}
.inspector #node-info-section.person-inline-info :is(#field-title,#field-subtitle,#field-content):focus{
  border-color:color-mix(in srgb,var(--accent) 72%,var(--line))!important;
  background:color-mix(in srgb,var(--bg) 78%,var(--panel))!important;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 10%,transparent)!important;
  outline:0!important;
}

/* A compact character dossier: identity first, narrative second. */
.inspector #node-info-section.person-inline-info>.inspector-disclosure-body{
  position:relative;
  display:grid;
  gap:0;
  padding:13px 18px 18px!important;
  background:color-mix(in srgb,var(--panel2) 54%,transparent)!important;
}
/* A quiet inset divider separates every primary menu title from its content. */
.inspector :is(#node-form,#line-form)>details.inspector-disclosure>.inspector-disclosure-body,
.inspector #avatar-library-section>.default-avatar-section{
  position:relative;
}
.inspector :is(#node-form,#line-form)>details.inspector-disclosure>.inspector-disclosure-body::before,
.inspector #avatar-library-section>.default-avatar-section::before{
  content:"";
  position:absolute;
  top:0;
  left:18px;
  right:18px;
  height:1px;
  background:color-mix(in srgb,var(--line) 62%,transparent);
  pointer-events:none;
}
.inspector #node-info-section.person-inline-info>.inspector-disclosure-body>label{
  grid-template-columns:58px minmax(0,1fr);
  gap:12px;
  min-height:43px;
  margin:0!important;
  padding:4px 0;
  border-bottom:1px solid color-mix(in srgb,var(--line) 52%,transparent);
}
.inspector #node-info-section.person-inline-info>.inspector-disclosure-body>label>span{
  font-size:10px;
  letter-spacing:.04em;
}
.inspector #node-info-section.person-inline-info #field-title{
  font-size:16px!important;
  font-weight:800!important;
  letter-spacing:-.01em;
}
.inspector #node-info-section.person-inline-info #field-subtitle{
  color:color-mix(in srgb,var(--text) 76%,var(--muted));
  font-size:12px!important;
  font-weight:650;
}
.inspector #node-info-section.person-inline-info .person-file-bio{
  margin-top:12px;
  padding-top:2px;
}
.inspector #node-info-section.person-inline-info .field-label-row{
  justify-content:space-between!important;
  min-height:28px;
}
.inspector #node-info-section.person-inline-info #field-content-label{
  color:var(--muted);
  font-size:10px;
  font-weight:750;
  letter-spacing:.04em;
}
.inspector #node-info-section.person-inline-info #field-content{
  min-height:112px!important;
  padding:7px 8px!important;
  color:var(--text);
  font-size:13px!important;
  line-height:1.78!important;
}

/* Persistent section marker; active operation regions deepen it. */
body .inspector #avatar-library-section>summary,
body .inspector #node-form>details.inspector-disclosure>summary,
body .inspector #line-form>details.inspector-disclosure>summary{
  position:relative;
}
body .inspector #avatar-library-section>summary::after,
body .inspector #node-form>details.inspector-disclosure>summary::after,
body .inspector #line-form>details.inspector-disclosure>summary::after{
  content:""!important;
  position:absolute;
  top:8px;
  bottom:8px;
  left:0;
  display:block!important;
  width:4px!important;
  height:auto!important;
  border:0!important;
  border-radius:0 3px 3px 0!important;
  background:color-mix(in srgb,var(--accent) 52%,transparent)!important;
  box-shadow:none!important;
  transform:none!important;
  transition:background .18s ease!important;
  pointer-events:none;
}
body .inspector #avatar-library-section[open]>summary::after,
body .inspector #node-form>details.inspector-disclosure[open]>summary::after,
body .inspector #line-form>details.inspector-disclosure[open]>summary::after,
body .inspector #avatar-library-section:hover>summary::after,
body .inspector #node-form>details.inspector-disclosure:hover>summary::after,
body .inspector #line-form>details.inspector-disclosure:hover>summary::after{
  background:color-mix(in srgb,var(--accent) 92%,transparent)!important;
}

/* A restrained radius makes data-entry controls read as precise tools. */
body :is(input:not([type="range"]):not([type="checkbox"]):not([type="radio"]),textarea,select){border-radius:4px!important}

/* Keep the active section legible while editing a field inside it. */
.inspector .inspector-disclosure[open]>summary{
  background:transparent!important;
  box-shadow:none;
  color:var(--text)!important;
}
.inspector #node-info-section[open]>summary{
  background:transparent!important;
  box-shadow:none!important;
  color:var(--text)!important;
}

/* The role form is larger than a collapsed menu, so its entire area drives the same header feedback. */
.inspector #node-info-section:hover>summary{
  background:color-mix(in srgb,var(--accent) 20%,var(--panel2))!important;
  box-shadow:inset 5px 0 var(--accent)!important;
  color:color-mix(in srgb,var(--text) 90%,var(--accent))!important;
}

/* The pointer may be anywhere in an operation region; its primary header stays highlighted. */
.inspector #avatar-library-section:hover>summary,
.inspector #node-form>details:hover>summary,
.inspector #line-form>details:hover>summary{
  background:color-mix(in srgb,var(--accent) 20%,var(--panel2))!important;
  box-shadow:inset 5px 0 var(--accent)!important;
  color:color-mix(in srgb,var(--text) 90%,var(--accent))!important;
}
.inspector #avatar-library-section:hover>summary::before,
.inspector #node-form>details:hover>summary::before,
.inspector #line-form>details:hover>summary::before{color:var(--accent)!important}

/* Extend the active cue through the complete operation region. */
.inspector #avatar-library-section,
.inspector #node-form>details,
.inspector #line-form>details{transition:background .18s ease,box-shadow .18s ease,border-color .18s ease}
.inspector #avatar-library-section:hover,
.inspector #node-form>details:hover,
.inspector #line-form>details:hover{
  background:color-mix(in srgb,var(--accent) 6%,var(--panel2))!important;
  box-shadow:inset 5px 0 color-mix(in srgb,var(--accent) 88%,transparent)!important;
  border-bottom-color:color-mix(in srgb,var(--accent) 46%,var(--line))!important;
}
.inspector #avatar-library-section:hover>summary,
.inspector #node-form>details:hover>summary,
.inspector #line-form>details:hover>summary{box-shadow:none!important}

/* Explicitly keep every primary operation menu on the same interaction contract. */
.inspector :is(#avatar-library-section,#node-info-section,#node-color-section,#person-style-field,#card-style-section,#node-edit-section,#line-edit-section):hover{
  background:color-mix(in srgb,var(--accent) 6%,var(--panel2))!important;
  box-shadow:inset 5px 0 color-mix(in srgb,var(--accent) 88%,transparent)!important;
  border-bottom-color:color-mix(in srgb,var(--accent) 46%,var(--line))!important;
}
.inspector :is(#avatar-library-section,#node-info-section,#node-color-section,#person-style-field,#card-style-section,#node-edit-section,#line-edit-section):hover>summary{
  background:color-mix(in srgb,var(--accent) 20%,var(--panel2))!important;
  box-shadow:none!important;
  color:color-mix(in srgb,var(--text) 90%,var(--accent))!important;
}

/* Pointer state is mirrored in JS so nested controls cannot break the visual feedback. */
.inspector :is(#avatar-library-section,#node-info-section,#node-color-section,#person-style-field,#card-style-section,#node-edit-section,#line-edit-section).is-region-hover{
  background:color-mix(in srgb,var(--accent) 7%,var(--panel2))!important;
  box-shadow:inset 5px 0 var(--accent)!important;
}
.inspector :is(#avatar-library-section,#node-info-section,#node-color-section,#person-style-field,#card-style-section,#node-edit-section,#line-edit-section).is-region-hover>summary{
  background:color-mix(in srgb,var(--accent) 24%,var(--panel2))!important;
  box-shadow:none!important;
  color:var(--text)!important;
}
.inspector :is(#node-info-section,#node-color-section,#person-style-field,#card-style-section,#node-edit-section,#line-edit-section).is-region-hover>.inspector-disclosure-body{
  background:color-mix(in srgb,var(--accent) 7%,var(--panel2))!important;
}
.inspector #avatar-library-section.is-region-hover>.default-avatar-section{
  background:color-mix(in srgb,var(--accent) 7%,var(--panel2))!important;
}

/* Give the avatar picker a calmer vertical rhythm below its primary heading. */
.inspector #avatar-library-section>.default-avatar-section{
  padding:14px 18px 17px!important;
}
.inspector #avatar-library-section>.default-avatar-section>span{
  margin-bottom:11px;
  line-height:1.35;
}
.inspector #avatar-library-section>.default-avatar-section>.default-avatar-grid{
  align-items:center;
  gap:8px;
  padding:1px 0 2px;
}
.inspector #avatar-library-section .person-avatar-library{
  margin-top:15px;
  padding-top:13px;
}
.inspector #avatar-library-section .person-avatar-library-head{
  margin-bottom:10px;
}
.inspector #avatar-library-section .person-avatar-library .avatar-folder-grid{
  gap:9px;
  padding:2px 3px 3px;
}

/* Refined Chinese typography: clear hierarchy without heavy, crowded labels. */
.inspector{
  font-family:Inter,"Noto Sans SC","Microsoft YaHei UI","PingFang SC",system-ui,sans-serif;
  font-kerning:normal;
}
.inspector #avatar-library-section>summary,
.inspector :is(#node-form,#line-form)>.inspector-disclosure>summary{
  font-size:14px!important;
  font-weight:700!important;
  line-height:1.3;
  letter-spacing:0!important;
}
.inspector #avatar-library-section>.default-avatar-section>span,
.inspector #avatar-library-section .person-avatar-library-head span{
  color:color-mix(in srgb,var(--muted) 92%,var(--text));
  font-size:11px;
  font-weight:650;
  letter-spacing:.01em;
}
.inspector #node-info-section.person-inline-info>.inspector-disclosure-body>label>span,
.inspector #node-info-section.person-inline-info #field-content-label{
  font-size:10px;
  font-weight:650;
  line-height:1.4;
  letter-spacing:.025em;
}
.inspector #node-info-section.person-inline-info #field-title{
  font-size:15px!important;
  font-weight:720!important;
  line-height:1.4!important;
  letter-spacing:0!important;
}
.inspector #node-info-section.person-inline-info #field-subtitle{
  font-size:12px!important;
  font-weight:580!important;
  line-height:1.45!important;
  letter-spacing:0!important;
}
.inspector #node-info-section.person-inline-info #field-content{
  font-size:13px!important;
  font-weight:420!important;
  line-height:1.72!important;
  letter-spacing:.003em!important;
}
.inspector #node-info-section.person-inline-info #field-title.auto-text-value,
.inspector #node-info-section.person-inline-info #field-subtitle.auto-text-value{
  font-weight:500!important;
}
.inspector #node-info-section.person-inline-info #ai-person-bio-btn{
  font-size:10px;
  font-weight:650;
  letter-spacing:.01em;
}

/* System defaults read as placeholders until the user edits them. */
.inspector input.auto-text-value,
.inspector textarea.auto-text-value{
  color:color-mix(in srgb,var(--muted) 60%,#fff)!important;
  -webkit-text-fill-color:color-mix(in srgb,var(--muted) 60%,#fff);
}
.inspector input.auto-text-value:focus,
.inspector textarea.auto-text-value:focus{
  color:color-mix(in srgb,var(--muted) 60%,#fff)!important;
  -webkit-text-fill-color:color-mix(in srgb,var(--muted) 60%,#fff);
}