/* Review markup layer. Fixed colours on purpose: this sits over photographs and both page themes. */
#mk-root{--mk:#ff3b30;--mk-pin:#ff9f0a;--mk-ok:#30d158;--mk-ink:#1d1d1f;--mk-paper:#ffffff;--mk-soft:#6e6e73;--mk-rule:#d2d2d7;font-family:"Instrument Sans",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:14px;line-height:1.4}
@media (prefers-color-scheme:dark){#mk-root{--mk-ink:#f5f5f7;--mk-paper:#1d1d1f;--mk-soft:#a1a1a6;--mk-rule:#424245}}
#mk-layer{position:absolute;left:0;top:0;width:100%;pointer-events:none;z-index:60}
#mk-layer.mk-hidden{display:none}
#mk-capture{position:fixed;inset:0;z-index:59;display:none;touch-action:none;cursor:crosshair;background:rgba(31,111,168,.04)}
#mk-capture.on{display:block}
.mk-item{position:absolute;pointer-events:auto;cursor:pointer;box-sizing:border-box}
.mk-circle{border:3px solid var(--mk);border-radius:50%;box-shadow:0 0 0 2px rgba(255,255,255,.65),inset 0 0 0 2px rgba(255,255,255,.35)}
.mk-rect{border:3px solid var(--mk);border-radius:8px;box-shadow:0 0 0 2px rgba(255,255,255,.65),inset 0 0 0 2px rgba(255,255,255,.35)}
.mk-draw{pointer-events:none}
.mk-draw svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;display:block}
.mk-draw polyline{fill:none;stroke:var(--mk);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke;pointer-events:visibleStroke;cursor:pointer;paint-order:stroke;filter:drop-shadow(0 0 2px rgba(255,255,255,.8))}
.mk-badge{position:absolute;left:0;top:0;transform:translate(-50%,-50%);min-width:26px;height:26px;padding:0 7px;border-radius:13px;background:var(--mk);color:#fff;font-weight:600;font-size:13px;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px rgba(0,0,0,.35),0 0 0 2px #fff;pointer-events:auto;cursor:pointer;white-space:nowrap;font-variant-numeric:tabular-nums}
.mk-pin .mk-badge{background:var(--mk-pin);transform:translate(-50%,-50%) scale(1.1)}
.mk-item.mk-resolved{opacity:.55}
.mk-item.mk-resolved.mk-circle,.mk-item.mk-resolved.mk-rect{border-style:dashed;border-color:var(--mk-ok)}
.mk-item.mk-resolved polyline{stroke:var(--mk-ok);stroke-dasharray:6 6}
.mk-item.mk-resolved .mk-badge{background:var(--mk-ok)}
.mk-temp{opacity:.9}

/* Toolbar */
#mk-bar{position:fixed;left:50%;bottom:calc(14px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:70;display:flex;align-items:center;gap:4px;padding:6px;border-radius:980px;background:rgba(29,29,31,.86);color:#f5f5f7;backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);box-shadow:0 8px 30px rgba(0,0,0,.35);max-width:calc(100vw - 24px);flex-wrap:wrap;justify-content:center}
#mk-bar button,#mk-bar a.mk-btn{appearance:none;border:0;background:transparent;color:#f5f5f7;font:inherit;font-size:13px;font-weight:500;padding:8px 12px;border-radius:980px;cursor:pointer;display:inline-flex;align-items:center;gap:6px;white-space:nowrap;text-decoration:none;transition:background .15s}
#mk-bar button:hover,#mk-bar a.mk-btn:hover{background:rgba(255,255,255,.12)}
#mk-bar button[aria-pressed="true"]{background:#fff;color:#1d1d1f}
#mk-bar button svg{width:16px;height:16px;display:block}
#mk-bar .mk-sep{width:1px;height:22px;background:rgba(255,255,255,.18);margin:0 2px}
#mk-bar input{font:inherit;font-size:13px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.14);color:#fff;border-radius:980px;padding:7px 12px;width:128px;outline:none}
#mk-bar input::placeholder{color:rgba(255,255,255,.55)}
#mk-bar input:focus{border-color:rgba(255,255,255,.5)}
#mk-bar .mk-count{background:var(--mk);color:#fff;border-radius:980px;padding:1px 7px;font-size:11px;font-weight:600;margin-left:2px}
#mk-hint{position:fixed;left:50%;bottom:calc(66px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:70;font-size:12px;color:#fff;background:rgba(29,29,31,.8);padding:6px 12px;border-radius:980px;pointer-events:none;opacity:0;transition:opacity .2s;white-space:nowrap;max-width:calc(100vw - 24px);text-overflow:ellipsis;overflow:hidden}
#mk-hint.on{opacity:1}
@media (max-width:640px){#mk-bar button .mk-lbl{display:none}#mk-bar input{width:96px}}

/* Popover */
#mk-pop{position:absolute;z-index:71;width:min(340px,calc(100vw - 32px));background:var(--mk-paper);color:var(--mk-ink);border-radius:16px;box-shadow:0 12px 40px rgba(0,0,0,.28),0 0 0 1px var(--mk-rule);padding:14px 14px 12px;display:none}
#mk-pop.on{display:block}
#mk-pop .mk-head{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--mk-soft);margin-bottom:8px;flex-wrap:wrap}
#mk-pop .mk-head b{color:var(--mk-ink);font-weight:600}
#mk-pop .mk-where{font-size:12px;color:var(--mk-soft);margin:-4px 0 8px}
#mk-pop .mk-text{font-size:15px;line-height:1.4;white-space:pre-wrap;word-wrap:break-word;margin-bottom:8px}
#mk-pop textarea,#mk-pop input{font:inherit;font-size:14px;width:100%;box-sizing:border-box;background:transparent;color:var(--mk-ink);border:1px solid var(--mk-rule);border-radius:10px;padding:9px 10px;outline:none}
#mk-pop textarea{min-height:76px;resize:vertical}
#mk-pop textarea:focus,#mk-pop input:focus{border-color:#1f6fa8;box-shadow:0 0 0 3px rgba(31,111,168,.2)}
#mk-pop .mk-row{display:flex;gap:8px;align-items:center;margin-top:8px;flex-wrap:wrap}
#mk-pop .mk-row .grow{flex:1}
#mk-pop button{font:inherit;font-size:13px;font-weight:500;border:0;border-radius:980px;padding:8px 14px;cursor:pointer;background:var(--mk-rule);color:var(--mk-ink)}
#mk-pop button.pri{background:#1f6fa8;color:#fff}
#mk-pop button.danger{background:transparent;color:#ff3b30;padding-inline:6px}
#mk-pop button.ok{background:var(--mk-ok);color:#06240f}
#mk-pop button:disabled{opacity:.5;cursor:default}
#mk-pop .mk-replies{display:grid;gap:8px;margin:6px 0 4px;border-top:1px solid var(--mk-rule);padding-top:8px}
#mk-pop .mk-reply{font-size:13px}
#mk-pop .mk-reply small{display:block;color:var(--mk-soft);font-size:11px}
#mk-pop .mk-name{display:flex;gap:8px;align-items:center;font-size:12px;color:var(--mk-soft);margin-top:8px}
#mk-pop .mk-name input{width:auto;flex:1;padding:6px 10px;font-size:13px}
#mk-toast{position:fixed;left:50%;top:calc(14px + env(safe-area-inset-top,0px));transform:translateX(-50%);z-index:72;background:rgba(29,29,31,.9);color:#fff;font-size:13px;padding:8px 14px;border-radius:980px;opacity:0;transition:opacity .2s;pointer-events:none}
#mk-toast.on{opacity:1}
