.kh-sites .fence-map { max-width:30rem; margin-block:1rem; }
.kh-sites .fence-map svg { display:block; width:100%; height:auto; aspect-ratio:1; border:1px solid var(--kh-outline-variant); border-radius:var(--kh-radius-md); background:var(--kh-surface); touch-action:none; }
.kh-sites .fence-map svg:focus-visible,.kh-sites .map-handle:focus-visible { outline:3px solid var(--kh-primary); outline-offset:3px; }
.kh-sites .fence-map text { fill:var(--kh-on-surface); font:14px system-ui,sans-serif; }
.kh-sites .map-grid { fill:none; stroke:var(--kh-outline-variant); }
.kh-sites .map-scale { fill:none; stroke:var(--kh-on-surface); stroke-width:2; }
.kh-sites .map-circle { fill:var(--kh-primary-container); fill-opacity:.55; stroke:var(--kh-primary); stroke-width:3; }
.kh-sites .map-handle { fill:var(--kh-surface); stroke:var(--kh-primary); stroke-width:4; cursor:grab; }
.kh-sites .map-handle:active { cursor:grabbing; }
.kh-sites #column-mapping { margin-block:1.5rem; }
@media (forced-colors:active) { .kh-sites .map-circle,.kh-sites .map-handle,.kh-sites .map-scale,.kh-sites .map-grid { stroke:CanvasText; } }

.kh-sites .map-handle:focus-visible { stroke-width:6; }

.kh-sites .site-qr { display:block; width:min(100%,20rem); height:auto; margin-block:1rem; shape-rendering:crispEdges; }
.kh-sites .site-qr-payload { overflow-wrap:anywhere; }
@media print {
  body.printing-site { background:white; color:black; }
  body.printing-site *:not(:has([data-printing])):not([data-printing]):not([data-printing] *) { display:none!important; }
  body.printing-site *:has([data-printing]) { display:block; margin:0; padding:0; width:auto; max-width:none; border:0; background:white; color:black; }
  body.printing-site [data-printing] { padding:1cm; background:white; color:black; }
  body.printing-site [data-printing] [data-print-site] { display:none!important; }
}