/* Owner annotation surface. Reuses site.css custom properties (loaded first)
   with hard fallbacks so it also looks fine if loaded standalone. */
#bf-annot-bar {
  position: fixed; top: .5rem; right: .5rem; z-index: 9999;
  display: flex; gap: .4rem; align-items: center;
  background: var(--bg, #fff); color: var(--fg, #111);
  border: 1px solid var(--border, #ccc); border-radius: 8px;
  padding: .3rem .5rem; font: 13px system-ui;
  box-shadow: 0 2px 8px rgba(0,0,0,.15);
}
#bf-annot-bar button {
  font: 12px system-ui; cursor: pointer; color: var(--fg, #111);
  background: none; border: 1px solid var(--border, #ccc);
  border-radius: 6px; padding: .15rem .4rem;
}
#bf-annot-panel {
  position: fixed; top: 3rem; right: .5rem; width: 20rem;
  max-height: 75vh; overflow: auto; z-index: 9999;
  background: var(--bg, #fff); color: var(--fg, #111);
  border: 1px solid var(--border, #ccc); border-radius: 8px;
  padding: .6rem .8rem; font: 13px system-ui;
  box-shadow: 0 2px 12px rgba(0,0,0,.2);
}
#bf-annot-panel h4 { margin: .2rem 0 .5rem; }
#bf-annot-list { list-style: none; padding: 0; margin: 0 0 .6rem; }
#bf-annot-list li { border-top: 1px solid var(--border, #eee); padding: .35rem 0; font-size: 12px; }
#bf-annot-list .bf-scope {
  font-size: 10px; text-transform: uppercase; color: var(--muted, #888);
  border: 1px solid var(--border, #ccc); border-radius: 4px; padding: 0 .25rem;
}
#bf-annot-list q { color: var(--muted, #666); }
#bf-annot-list .bf-del { float: right; cursor: pointer; background: none; border: none; color: var(--muted, #999); font-size: 13px; }
#bf-page-note, #bf-annot-selbox textarea {
  width: 100%; box-sizing: border-box; min-height: 3rem; font: 13px system-ui;
  border: 1px solid var(--border, #ccc); border-radius: 6px; padding: .3rem;
  background: var(--bg, #fff); color: var(--fg, #111);
}
#bf-add-page {
  margin-top: .4rem; cursor: pointer; background: var(--accent, #0b66c3);
  color: #fff; border: none; border-radius: 6px; padding: .3rem .6rem; font: 12px system-ui;
}
#bf-annot-selbox {
  position: absolute; z-index: 10000; width: 16rem;
  background: var(--bg, #fff); color: var(--fg, #111);
  border: 1px solid var(--border, #ccc); border-radius: 8px; padding: .4rem;
  box-shadow: 0 2px 12px rgba(0,0,0,.2);
}
#bf-annot-selbox button {
  cursor: pointer; font: 12px system-ui; margin: .3rem .3rem 0 0; color: var(--fg, #111);
  border: 1px solid var(--border, #ccc); border-radius: 6px; padding: .15rem .5rem; background: none;
}
#bf-annot-selbox .bf-save { background: var(--accent, #0b66c3); color: #fff; border: none; }