/* Root & viewport */
.kem-root{ width:100% }
.kem-viewport{ position:relative; width:100%; overflow:hidden }

/* Canvas (desktop uses transform scale) */
.kem-canvas{
  position:relative; width:100%;
  transform: translate(var(--kem-tx),var(--kem-ty)) scale(var(--kem-scale));
  transform-origin: center center;
  transition: transform 680ms cubic-bezier(.22,.61,.36,1); /* no transform-origin transition (prevents nudge) */
  will-change: transform;
}
.kem-map{ width:100%; height:auto; display:block; pointer-events:none; image-rendering: auto;           /* photos: keep default filtering */
  backface-visibility: hidden;     /* reduce composite fuzz */
  transform: translateZ(0);    }

/* Toolbar */
.kem-toolbar{
  position:absolute !important;
  top:12px !important; left:12px !important;
  z-index:1000002;
  display:flex; flex-direction:column; gap:6px;
  pointer-events:auto; text-align:left !important;
}
.kem-zoom{ width:48px; height:40px; border:0; background:none; cursor:pointer }
.kem-zoom img{ width:100%; height:100%; display:block; pointer-events:none }
.kem-zoom.kem-disabled{ opacity:.45; cursor:default; pointer-events:none }

/* Gradient dim: narrow, right->left */
.kem-dim{
  position:absolute; inset:0; z-index:18; pointer-events:auto;
  background: linear-gradient(
    to left,
    rgba(0,0,0,0.30) 0%,   /* edge darkness */
    rgba(0,0,0,0.30) 12%,  /* solid region width */
    rgba(0,0,0,0.00) 50%,  /* sharp drop finishes */
    rgba(0,0,0,0.00) 100%
  );
}

/* Close (uses shortcode icon) */
.kem-close{ position:absolute; top:14px; right:14px; z-index:23; width:48px; height:48px; border:0; background:transparent; cursor:pointer }
.kem-close img, .kem-modal-close img{ width:100%; height:100%; display:block; pointer-events:none }

/* Markers: constant-size hitbox */
/* Base rule (desktop); mobile will hard-override sizes */
.kem-markers{ position:absolute; inset:0; z-index:17; pointer-events:auto; transition:opacity 180ms ease }
.kem-marker{
  position:absolute;
  transform: translate(-50%, -100%); /* bottom-center anchor */
  width:  calc(var(--kem-d-marker, 48px) * var(--kem-inv, 1));
  height: calc(var(--kem-d-marker, 48px) * var(--kem-inv, 1));
  background:transparent; border:0; padding:0; cursor:pointer; pointer-events:auto;
  touch-action: manipulation;
}
.kem-marker-inner{ width:100%; height:100% }
.kem-marker-inner img{ display:block; width:100%; height:100%; pointer-events:none }

/* Panels (outside canvas; not scaled). Top-left is default; bc supported if needed */
.kem-panels{ position:absolute; inset:0; z-index:22; pointer-events:none }
.kem-panel{
  position:absolute;
  opacity:0; display:none; pointer-events:auto;
  transform: translate(0,0) scale(.985); /* top-left */
  transition: opacity 280ms ease 40ms, transform 280ms ease 40ms;
  will-change: transform, opacity;
}
.kem-panel.kem-in{ opacity:1; transform: translate(0,0) scale(1) }
.kem-panel[data-anchor="bc"]{ transform: translate(-50%,-100%) scale(.985) }
.kem-panel[data-anchor="bc"].kem-in{ transform: translate(-50%,-100%) scale(1) }
.kem-panel img.kem-panel-img{ display:block; height:auto; max-width:100% }

/* Pan cursors */
.kem-canvas.kem-canpan{ cursor:grab }
.kem-canvas.kem-grabbing{ cursor:grabbing }

/* Modal (mobile) */
.kem-modal{
  position:fixed; inset:0; background:rgba(28,24,24,.72);
  display:flex; align-items:center; justify-content:center;
  z-index:2147483647 !important
}
.kem-modal img.kem-modal-img{ max-width:min(92vw,720px); height:auto; display:block; }
.kem-modal-close{ position:absolute; top:14px; right:14px; width:53px; height:42px; border:0; background:transparent; cursor:pointer; z-index:2147483647 !important }

/* Utility */
[hidden]{ display:none !important }
.kem-noselect{ user-select:none }

/* Mobile layout-zoom */
@media (max-width:999px){
  .kem-viewport{ height: var(--kem-mobile-height, 98vw) }

  /* Layout-zoom: grow width, no CSS scale */
  .kem-layout-zoom .kem-canvas{
    width: calc(100% * var(--kem-scale));
    transform: translate(var(--kem-tx), var(--kem-ty)) !important;
    transform-origin: left center !important; /* fixed pivot so it doesn’t drift down */
  }

  /* Hard override marker size on mobile (no inverse) */
  .kem-layout-zoom .kem-marker{
    width:  var(--kem-m-marker, 44px) !important;
    height: var(--kem-m-marker, 44px) !important;
  }
  .kem-modal img.kem-modal-img{ width:min(92vw,720px); max-width: 300px; height:auto; display:block; }
  .kem-modal{ align-items:flex-end !important; padding-bottom: 20px }

  /* Put the close button at the bottom center */
  .kem-modal-close{
    position: absolute;
    top: auto !important;          /* override desktop */
    right: auto !important;        /* override desktop */
    left: 50% !important;
    bottom: max(16px, env(safe-area-inset-bottom)) !important; /* notch-safe */
    transform: translateX(-50%);
    width: 85px;                   /* tweak as you like */
    height: 75px;
    background: transparent;
    border: 0;
    cursor: pointer;
    z-index: 2147483647 !important; /* over everything */
    touch-action: manipulation;
  }

  /* Make only the close icon translucent */
  .kem-modal-close img{
    width: 100%;
    height: 100%;
    display: block;
    opacity: 0;                   /* transparency level */
    transition: opacity 120ms ease;
    pointer-events: none;          /* so taps hit the button */
  }
  }