/* Scoped boundary-face inspector; no changes to the main viewer's layout. */
.boundary-faces-overlay { position: fixed; inset: 0; z-index: 11000; background: #15202bc9; display: flex; padding: 16px; box-sizing: border-box; }
.bf-dialog { margin: auto; width: min(1240px, 100%); max-height: calc(100dvh - 32px); display: flex; flex-direction: column; background: #fafbfc; color: #253449; border-radius: 10px; box-shadow: 0 8px 32px #0006; padding: 16px; box-sizing: border-box; font: 14px/1.4 system-ui, sans-serif; }
.bf-dialog header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.bf-dialog h2 { margin: 0; font-size: 20px; }
.bf-dialog h3 { margin: 12px 0 6px; font-size: 15px; }
.bf-dialog button, .bf-dialog select { font: inherit; color: inherit; background: white; border: 1px solid #b0bac8; border-radius: 5px; padding: 7px 10px; cursor: pointer; }
.bf-dialog button:hover { border-color: #476d9e; background: #f1f5fb; }
.bf-dialog button:focus-visible, .bf-dialog select:focus-visible { outline: 3px solid #457dca; outline-offset: 2px; }
.bf-dialog button:disabled { opacity: .55; cursor: default; }
.bf-explanation { margin: 10px 0 4px; }
.bf-note { color: #58677b; font-size: 12px; margin: 0 0 10px; }
.bf-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; }
.bf-toolbar label { display: flex; align-items: center; gap: 6px; }
.bf-status { background: #eaf3ed; border-left: 4px solid #49805a; padding: 8px 12px; margin: 10px 0 0; }
.bf-status.unequal, .bf-status.error { background: #fff0ec; border-color: #bd4637; }
.bf-status.neutral { background: #edf0f4; border-color: #8996a7; }
.bf-body { overflow: auto; overscroll-behavior: contain; min-height: 0; }
.bf-table-scroll, .bf-graph-scroll { overflow: auto; margin-bottom: 12px; }
.bf-table { border-collapse: collapse; width: 100%; }
.bf-table th, .bf-table td { padding: 8px; border: 1px solid #d2d9e3; vertical-align: top; text-align: left; }
.bf-table th { background: #edf1f7; }
.bf-table tbody th { width: 130px; font: 12px/1.5 monospace; overflow-wrap: anywhere; }
.bf-table td { width: 40%; }
.bf-dialog .bf-face { display: block; width: 100%; text-align: left; padding: 7px; font-size: 12px; background: #fff; }
.bf-face strong, .bf-face code { display: block; overflow-wrap: anywhere; }
.bf-face code { color: #596b83; font-size: 11px; }
.bf-preview { text-align: center; overflow: hidden; margin-top: 4px; }
.bf-strip { display: flex; justify-content: flex-start; gap: 5px; overflow-x: auto; }
.bf-strip figure { margin: 0; flex-shrink: 0; }
.bf-strip canvas { display: block; max-width: 100%; }
.bf-strip figcaption, .bf-preview small { font-size: 10px; color: #52627b; }
.bf-number { display: flex; align-items: center; justify-content: center; min-height: 60px; color: #326544; font-size: 26px; font-weight: 600; }
.bf-dialog .bf-compare { margin-top: 6px; display: block; font-size: 12px; overflow-wrap: anywhere; }
.bf-compare.equal { border-color: #619370; color: #326044; }
.bf-compare.unequal { border: 2px solid #c25245; color: #a12e23; background: #fff1ed; }
.bf-table small { display: block; color: #67768b; margin-top: 4px; }
.bf-dialog summary { cursor: pointer; font-weight: 600; padding: 8px 0; }
.bf-level { position: absolute; top: 4px; font-size: 12px; }
.bf-edges { position: absolute; inset: 0; overflow: visible; }
.bf-edges path { fill: none; stroke-width: 1.7; }
.bf-edges path.source { stroke: #3b70ac; }
.bf-edges path.target { stroke: #8a549b; }
.bf-edges text { font: bold 11px system-ui, sans-serif; text-anchor: middle; }
.bf-edges text.source { fill: #285d9c; }
.bf-edges text.target { fill: #854694; }
.bf-graph-card { position: absolute; width: 182px; height: 220px; background: #fff; border: 1px solid #bbc6d5; border-radius: 6px; box-sizing: border-box; overflow: auto; }
.bf-graph-card .bf-face { border: 0; }
.bf-graph-card .bf-preview small { display: none; }
.bf-graph-card > .bf-compare { position: absolute; right: 2px; top: 2px; z-index: 1; margin: 0; padding: 2px 5px; font-size: 11px; }
.bf-graph-card:has(> .bf-compare) { border-color: #c25245; }
.bf-graph-card:has(> .bf-compare) .bf-face strong { padding-right: 38px; }
.bf-paths { font: 10px/1.4 monospace; white-space: pre-wrap; overflow-wrap: anywhere; padding: 0 7px 5px; }
.bf-pair { display: flex; gap: 18px; }
.bf-pair > div { flex: 1; min-width: 0; border: 1px solid #bbc6d5; padding: 10px; border-radius: 6px; }
.bf-pair strong { font-size: 13px; overflow-wrap: anywhere; }
.bf-diff { width: 100%; border-collapse: collapse; font: 12px/1.5 monospace; }
.bf-diff th, .bf-diff td { border: 1px solid #ddc3bd; padding: 8px; text-align: left; overflow-wrap: anywhere; }
.bf-diff td { background: #fff2e9; }
@media (max-width: 820px) {
  .boundary-faces-overlay { padding: 0; }
  .bf-dialog { width: 100%; height: 100%; max-height: 100dvh; border-radius: 0; padding: max(10px, env(safe-area-inset-top)) 10px max(10px, env(safe-area-inset-bottom)); }
  .bf-dialog h2 { font-size: 17px; }
  .bf-dialog button, .bf-dialog select { min-height: 42px; }
  .bf-explanation { font-size: 12px; }
  .bf-note { font-size: 10px; }
  .bf-table { min-width: 540px; }
  .bf-pair { flex-direction: column; }
}