/* PlanScope — PDF Markup / Measure tool (standalone surface).
   Palette mirrors the estate PWA (styles.css) + takeoff viewer (review.css)
   WITHOUT importing them, so this page stands alone under the strict CSP. */
:root {
  --bg: #091018;
  --bg-soft: #0d1620;
  --panel: #141a2b;
  --panel-2: #1b2338;
  --panel-3: #222c46;
  --surface: #0f1823;
  --line: #26304a;
  --line-soft: #1e2740;
  --chip: #172637;
  --chip-border: #2a394a;
  --text: #e8edf6;
  --muted: #a6b7ca;
  --faint: #67748f;
  --btn: #1d6ec8;
  --btn-hover: #165ba7;
  --accent: #2f6fed;
  --accent-soft: rgba(47, 111, 237, .16);
  --teal: #35d1c6;
  --green: #27b354;
  --amber: #f0a01f;
  --red: #e05252;
  --mark: #e2202b;      /* default annotation ink — reads on white plans */
  --radius: 10px;
  --shadow: 0 22px 48px rgba(0,0,0,.35);
}

* { box-sizing: border-box; }

/* Dark scrollbars — SAME treatment as the takeoff review viewer (review.css) so
   the markup surface's scroll areas (Find results, Counts list, side panels)
   never flash a light OS scrollbar. Chromium via ::-webkit-scrollbar; Firefox
   via scrollbar-color/-width. --panel-3 / --panel here match review.css 1:1. */
* { scrollbar-width: thin; scrollbar-color: var(--panel-3) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--panel-3); border-radius: 999px; border: 2px solid var(--panel); }
::-webkit-scrollbar-thumb:hover { background: #2c395c; }
::-webkit-scrollbar-track { background: transparent; }

/* app manages its own scrolling (mkStageWrap); the document itself never scrolls —
   this also stops a slid-out (off-screen) panel from creating page overflow. */
html, body { height: 100%; overflow: hidden; }
body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  color: var(--text);
  background-color: #0b0f1a;   /* blueprint grid backdrop (Tyler 2026-07-21) */
  background-image:
    radial-gradient(1200px 680px at 50% 42%, rgba(47,111,237,0.13), transparent 66%),
    linear-gradient(rgba(130,160,220,0.075) 1px, transparent 1px),
    linear-gradient(90deg, rgba(130,160,220,0.075) 1px, transparent 1px);
  background-size: 100% 100%, 38px 38px, 38px 38px;
  background-attachment: fixed;
  background-repeat: no-repeat, repeat, repeat;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ---------------- top bar ---------------- */
.mk-topbar {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 14px;
  background: rgba(12,20,29,.94);
  border-bottom: 1px solid var(--line);
  flex: 0 0 auto;
  z-index: 20;
}
.mk-brand { display: flex; align-items: center; gap: 9px; }
/* Centered title (Tyler 2026-07-21): on the landing (no PDF) the topbar's right side is
   empty, so absolutely-center the brand between the "← PlanScope" back button and the
   edge. Once a PDF is open (body.mk-doc) the toolbar fills the right, so the brand
   returns to normal left flow. On narrow screens it also stays left to avoid overlap. */
.mk-brand { position: absolute; left: 50%; transform: translateX(-50%); }
body.mk-doc .mk-brand { position: static; transform: none; }
@media (max-width: 620px) { .mk-brand { position: static; transform: none; } }
.mk-brand img { width: 26px; height: 26px; object-fit: contain; border-radius: 6px; }
.mk-brand .mk-title { font-weight: 800; font-size: clamp(19px, 4.2vw, 28px); letter-spacing: .2px; }
.mk-brand .mk-sub { color: var(--faint); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .14em; }
.mk-back {
  color: var(--muted); text-decoration: none; font-weight: 700; font-size: 13px;
  border: 1px solid var(--chip-border); border-radius: 9px; padding: 6px 11px;
  background: rgba(12,20,29,.5); white-space: nowrap;
}
.mk-back:hover { background: #16304d; border-color: #2b5c91; color: #d9ebff; }
.mk-spacer { flex: 1 1 auto; }

/* Open document name, sitting with the title as "PDF Markup - <name>"
   (Tyler 2026-07-26). flex:0 1 auto + a hard max-width + min-width:0 on the
   brand means a long name ELLIPSISES rather than growing the brand and shoving
   the undo/redo cluster along the bar. Full name is on the title attribute. */
.mk-brand { min-width: 0; }
/* WIDTH IS FIXED, NOT max-width: the slot is the same size whether the name is
   "a.pdf" or a 120-character permit-set title, so the length of the open
   document can never move the undo/redo cluster or any other action button.
   (max-width alone did move them - measured 708px -> 720px.) It still shrinks
   with the viewport, but it shrinks identically for every name. */
.mk-file-name {
  flex: 0 1 auto; min-width: 0; width: min(240px, 16vw);
  color: var(--muted); font-size: 13px; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mk-file-name::before { content: "\2014"; color: var(--faint); margin-right: 8px; font-weight: 400; }
@media (max-width: 1280px) { .mk-file-name { width: 150px; } }
@media (max-width: 1040px) { .mk-file-name { width: 96px; } }
/* Brand block: never wraps to a second line, and CLIPS rather than painting over
   its neighbours. Without overflow:hidden a non-shrinking 28px title inside a
   shrunken brand box overflowed and drew straight across the undo/redo cluster
   and the Set-scale chip at ~900px wide. Below the desktop widths this tool is
   actually used at, the title steps down in size and the document name drops out
   entirely, so the title is not left truncated to "PDF Ma...". */
.mk-brand { overflow: hidden; }
.mk-brand > div { flex: 0 1 auto; min-width: 0; }
.mk-brand .mk-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 1440px) { .mk-brand .mk-title { font-size: 22px; } }
@media (max-width: 1100px) { .mk-brand .mk-title { font-size: 20px; } }
@media (max-width: 1200px) { .mk-file-name { display: none; } }   /* below this the bar cannot hold the name AND a whole title */
@media (max-width: 900px)  { .mk-brand .mk-title { font-size: 18px; } }

/* undo / redo pair — top bar, always reachable (takeoff idiom) */
.mk-history { display: flex; align-items: center; gap: 4px; }

/* ---------------- inline Find box (top bar) ----------------
   Replaces the old Find icon button (Tyler 2026-07-26): always visible, type
   straight into it. Deliberately COMPACT - sized for a short query, not a
   full-width bar. Fixed width so it never grows with the query. */
.mk-findbox {
  display: flex; align-items: center; gap: 5px; flex: 0 0 auto;
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 9px;
  padding: 3px 6px 3px 8px; height: 32px; box-sizing: border-box;
}
.mk-findbox.focused, .mk-findbox.panel-open { border-color: var(--accent); }
.mk-findbox.focused { box-shadow: 0 0 0 3px var(--accent-soft); }
.mk-findbox-ico { color: var(--faint); flex: 0 0 auto; }
.mk-findbox.focused .mk-findbox-ico { color: var(--accent); }
.mk-findbox input {
  width: 128px; flex: 0 0 auto; min-width: 0;
  background: none; border: 0; outline: none; padding: 0;
  color: var(--text); font: inherit; font-size: 12.5px;
}
.mk-findbox input::placeholder { color: var(--faint); }
.mk-findbox input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.mk-findbox-count { flex: 0 0 auto; min-width: 30px; text-align: right; color: var(--muted); font-size: 11px; font-weight: 800; font-variant-numeric: tabular-nums; }
.mk-findbox-count.none { color: var(--amber); }
.mk-findbox-nav {
  flex: 0 0 auto; background: none; border: 0; color: var(--muted);
  font-size: 15px; line-height: 1; padding: 2px 4px; border-radius: 5px; cursor: pointer;
}
.mk-findbox-nav:hover:not(:disabled) { background: var(--panel-3); color: var(--text); }
.mk-findbox-nav:disabled { opacity: .3; cursor: default; }
@media (max-width: 1280px) { .mk-findbox input { width: 96px; } }
@media (max-width: 1040px) { .mk-findbox input { width: 70px; } .mk-findbox-count { min-width: 22px; } }

/* ---------------- BOTTOM-RIGHT STAGE CLUSTER ----------------
   Deliberately matches the takeoff viewer's #stageZoom (review.css .stage-zoom):
   a translucent panel pinned bottom-right of the stage, holding a zoom stepper
   over the fit toggles over the page nav, with the page indicator itself a
   clickable picker that opens UPWARD. Same geometry, radii and shadow. */
.mk-stage-zoom { position: absolute; right: 12px; bottom: 12px; z-index: 24; transition: right .18s ease; }
/* The side panels (Find / Counts) are FIXED overlays at z-index 40, not layout
   siblings, so an open panel would sit straight on top of the cluster and the
   zoom / fit / page controls would silently vanish — and Find now opens on every
   keystroke, so that would be most of the time. Slide the cluster clear instead.
   Width tracks .mk-panel (300px / max 82vw). */
body.mk-panel-open .mk-stage-zoom { right: calc(min(300px, 82vw) + 12px); }
.mk-zoom-group {
  display: flex; flex-direction: column; gap: 3px; padding: 4px;
  background: rgba(13, 18, 32, .9); border: 1px solid var(--line);
  border-radius: 10px; backdrop-filter: blur(4px);
  box-shadow: 0 6px 22px rgba(0, 0, 0, .45);
}
.mk-sz-row { display: flex; gap: 3px; }
.mk-sz-zoom { justify-content: space-between; }
.mk-sz-fit .mk-sz-btn { flex: 1 1 0; }
.mk-sz-btn {
  border: 1px solid var(--line); background: var(--panel-2); color: var(--text);
  border-radius: 7px; padding: 4px 9px; font: inherit; font-size: 12px; font-weight: 700;
  cursor: pointer; line-height: 1.5; white-space: nowrap;
}
.mk-sz-btn:hover { background: var(--panel-3); }
.mk-sz-btn:disabled { opacity: .35; cursor: default; pointer-events: none; }
.mk-sz-btn.mk-zlevel { min-width: 52px; text-align: center; color: var(--muted); }
.mk-sz-btn .t-short { display: none; }
/* page nav band — hairline-separated, exactly like takeoff's .sheet-nav */
/* NOT a positioning context: the picker anchors to the whole cluster so it
   opens ABOVE it instead of covering the zoom / fit rows. */
.mk-page-nav { position: static; width: 100%; margin-top: 3px; padding-top: 5px; border-top: 1px solid var(--line); }
.mk-sz-page { justify-content: space-between; }
.mk-sz-page .mk-page-count { flex: 1 1 auto; min-width: 0; padding: 4px 6px; font-size: 12px; }
.mk-sz-page .mk-page-count::after { content: " \25BE"; color: var(--faint); }
.mk-sz-page .mk-page-count.open { border-color: var(--accent); }
.mk-sz-page #mkPrev, .mk-sz-page #mkNext { flex: 0 0 auto; font-size: 15px; line-height: 1; padding: 2px 9px; }
/* the picker opens UPWARD — the cluster sits at the stage bottom */
.mk-page-drop {
  position: absolute; bottom: calc(100% + 8px); right: 0; min-width: 220px; z-index: 60;
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 14px 44px rgba(0, 0, 0, .55); overflow-y: auto; max-height: 52vh;
}
.mk-pd-item { position: relative; display: flex; align-items: center; gap: 10px; padding: 7px 12px; cursor: pointer; font-size: 12.5px; }
.mk-pd-item:hover { background: var(--accent-soft); }
.mk-pd-item .m { font-weight: 650; flex: 1 1 auto; }
.mk-pd-item .w { color: var(--faint); font-size: 11px; }
.mk-pd-item.current { background: var(--accent-soft); }
.mk-pd-item.current .m { color: var(--accent); }
.mk-pd-item.current::before {
  content: ""; position: absolute; left: 0; top: 5px; bottom: 5px; width: 3px;
  border-radius: 0 2px 2px 0; background: var(--accent);
}
@media (max-width: 520px) {
  .mk-sz-btn .t-long { display: none; }
  .mk-sz-btn .t-short { display: inline; }
}

button {
  font-family: inherit;
}
.mk-btn {
  border: 1px solid var(--line); background: var(--panel-2); color: var(--text);
  border-radius: 8px; padding: 6px 11px; font-size: 13px; font-weight: 700; cursor: pointer;
  display: inline-flex; align-items: center; gap: 7px;
}
.mk-btn:hover { background: var(--panel-3); }
.mk-btn:disabled { opacity: .4; cursor: not-allowed; }
.mk-btn.mk-icon { padding: 6px 9px; min-width: 32px; justify-content: center; }
.mk-btn.mk-primary { background: var(--btn); border-color: transparent; color: #fff; }
.mk-btn.mk-primary:hover { background: var(--btn-hover); }
.mk-btn.mk-accent { background: var(--accent); border-color: transparent; color: #fff; }
/* Export CSV sits next to Export PDF in a bar that already fights for room; it
   must never wrap to two lines and grow the topbar. */
#mkCsvBtn { white-space: nowrap; }

/* ---------------- body: rail + stage ---------------- */
.mk-body { flex: 1 1 auto; display: flex; min-height: 0; position: relative; }

.mk-rail {
  flex: 0 0 auto; width: 62px; background: rgba(12,20,29,.88);
  border-right: 1px solid var(--line);
  display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 6px;
  z-index: 15;
}
.mk-tool {
  width: 50px; height: 50px; border-radius: 10px; border: 1px solid transparent;
  background: transparent; color: var(--muted); cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  font-size: 9.5px; font-weight: 700; letter-spacing: .02em;
}
.mk-tool svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.mk-tool:hover { color: var(--text); background: var(--panel-3); }
.mk-tool.active { color: #fff; background: var(--accent); border-color: transparent; }
.mk-tool:disabled { opacity: .35; cursor: not-allowed; }
.mk-rail-sep { width: 34px; height: 1px; background: var(--line); margin: 4px 0; }

/* Free-pan model: the stage never scrolls natively — the page+overlay layer
   (mkPageHolder) is translated via a CSS transform (state.panX/panY) so the
   sheet can be dragged freely at any zoom, including fit. overflow:hidden clips
   the off-panned sheet (Bluebeam-style). */
.mk-stage-wrap { flex: 1 1 auto; position: relative; min-width: 0; overflow: hidden; background: transparent; }
.mk-stage { min-height: 100%; display: flex; align-items: flex-start; justify-content: center; padding: 26px; }
.mk-page-holder {
  position: relative; box-shadow: 0 10px 40px rgba(0,0,0,.5); background: #fff; line-height: 0;
  will-change: transform;   /* free-pan translate lives here */
}
#mkCanvas { display: block; }
#mkOverlay { position: absolute; inset: 0; }         /* annotation + measure layer */
#mkMeasureSvg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }

/* empty state / drop zone */
.mk-empty {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 24px;
}
.mk-drop {
  width: min(560px, 90%); border: 2px dashed var(--chip-border); border-radius: 16px;
  background: rgba(18,27,37,.6); padding: 44px 32px; text-align: center;
}
.mk-drop.dragover { border-color: var(--accent); background: var(--accent-soft); }
.mk-drop h2 { margin: 0 0 6px; font-size: 20px; }
.mk-drop p { margin: 0 0 18px; color: var(--muted); font-size: 13.5px; line-height: 1.5; }

/* ---------------- annotations ---------------- */
.mk-annot { position: absolute; cursor: move; }
.mk-annot.selected { outline: 1px dashed var(--accent); outline-offset: 2px; }
.mk-annot .mk-handle {
  position: absolute; width: 12px; height: 12px; background: var(--accent); border: 1.5px solid #fff;
  border-radius: 3px; display: none;
}
.mk-annot.selected .mk-handle { display: block; }
.mk-annot .mk-h-resize { right: -7px; bottom: -7px; cursor: nwse-resize; }
.mk-annot .mk-h-del {
  right: -9px; top: -9px; width: 16px; height: 16px; border-radius: 50%; background: var(--red);
  color: #fff; cursor: pointer; align-items: center; justify-content: center; font-size: 11px; line-height: 1; font-weight: 900;
}
.mk-annot.selected .mk-h-del { display: flex; }

.mk-text-body {
  white-space: pre; outline: none; min-width: 8px; min-height: 1em;
  color: var(--mark); font-family: Helvetica, Arial, sans-serif; line-height: 1.2;
  padding: 0; caret-color: var(--accent);
}
.mk-annot.editing { cursor: text; }
.mk-annot.editing .mk-text-body { cursor: text; }

.mk-sign-img { display: block; width: 100%; height: 100%; pointer-events: none; user-select: none; }

/* ---------------- measure overlay ---------------- */
.mk-measure-line { fill: none; stroke: var(--teal); stroke-width: 2; }
.mk-measure-line.live { stroke-dasharray: 6 5; }
.mk-measure-line.selected { stroke: #8bf0e8; stroke-width: 3.5; filter: drop-shadow(0 0 3px rgba(53,209,198,.9)); }
/* transparent, thick, clickable hit-target sitting under the visible line */
.mk-measure-hit { fill: none; stroke: transparent; stroke-width: 16; pointer-events: stroke; cursor: pointer; }
.mk-measure-dot { position: absolute; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 0 2px rgba(10,17,25,.8); pointer-events: none; }
.mk-measure-dot.selected { background: #8bf0e8; box-shadow: 0 0 0 2px rgba(10,17,25,.9), 0 0 5px rgba(53,209,198,.9); }
/* per-measurement delete affordance: revealed on hover / when selected */
.mk-measure-del {
  position: absolute; transform: translate(-150%, -150%); width: 18px; height: 18px; border-radius: 50%;
  background: var(--red); color: #fff; border: 1.5px solid #fff; font-size: 12px; font-weight: 900; line-height: 15px;
  text-align: center; cursor: pointer; display: none; z-index: 5; box-shadow: 0 2px 6px rgba(0,0,0,.5);
}
.mk-measure-del.show { display: block; }
.mk-measure-seg {
  position: absolute; transform: translate(-50%, -50%); background: rgba(10,17,25,.9); color: var(--teal);
  border: 1px solid var(--teal); border-radius: 6px; padding: 1px 6px; font-size: 12px; font-weight: 800; white-space: nowrap; pointer-events: none;
}
.mk-measure-total {
  position: absolute; transform: translate(10px, 10px); background: var(--teal);
  color: #052a27; border-radius: 6px; padding: 2px 8px; font-size: 12px; font-weight: 900; white-space: nowrap; pointer-events: none;
}
.mk-calib-dot { background: var(--amber); box-shadow: 0 0 0 2px rgba(10,17,25,.8); }
.mk-calib-line { stroke: var(--amber); }

/* stage cursors per tool */
.mk-stage-wrap.tool-text   #mkOverlay,
.mk-stage-wrap.tool-measure #mkOverlay,
.mk-stage-wrap.tool-count #mkOverlay,
.mk-stage-wrap.tool-calibrate #mkOverlay { cursor: crosshair; }
/* Select-idle: empty area is pannable (grab), grabbing while dragging */
.mk-stage-wrap.tool-select #mkOverlay { cursor: grab; }
.mk-stage-wrap.panning, .mk-stage-wrap.panning #mkOverlay { cursor: grabbing !important; }

/* ---------------- floating hint banner ---------------- */
.mk-hint {
  position: absolute; top: 12px; left: 50%; transform: translateX(-50%);
  background: rgba(12,20,29,.96); border: 1px solid var(--accent); color: var(--text);
  border-radius: 999px; padding: 7px 16px; font-size: 12.5px; font-weight: 700; z-index: 30;
  display: none; align-items: center; gap: 12px; box-shadow: var(--shadow);
}
.mk-hint.show { display: inline-flex; }
.mk-hint .mk-hint-x { color: var(--muted); cursor: pointer; font-weight: 900; }

/* context bar (text props) */
.mk-ctx {
  position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%);
  background: rgba(12,20,29,.96); border: 1px solid var(--line); border-radius: 12px;
  padding: 8px 12px; display: none; align-items: center; gap: 12px; z-index: 30; box-shadow: var(--shadow);
}
.mk-ctx.show { display: flex; }
.mk-ctx label { color: var(--muted); font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; gap: 6px; }
.mk-ctx input[type=number] { width: 54px; background: var(--panel-2); color: var(--text); border: 1px solid var(--line); border-radius: 6px; padding: 3px 5px; font: inherit; font-size: 12.5px; }
.mk-ctx input[type=color] { width: 30px; height: 26px; padding: 0; border: 1px solid var(--line); border-radius: 6px; background: none; cursor: pointer; }
.mk-ctx-count { color: var(--teal); font-size: 12.5px; font-weight: 800; letter-spacing: .01em; }
/* text ctx + measure ctx share the same anchor — only one is shown at a time */
#mkTextCtx.show ~ #mkMeasureCtx.show { display: none; }

/* scale readout chip in topbar — click to open the preset scale popover */
.mk-scale-wrap { position: relative; display: inline-flex; }
.mk-scale-chip {
  font-size: 12px; font-weight: 700; color: var(--faint); border: 1px solid var(--chip-border);
  border-radius: 999px; padding: 4px 10px; background: var(--chip); white-space: nowrap; cursor: pointer;
  font-family: inherit;
}
.mk-scale-chip:hover { border-color: var(--accent); color: var(--text); }
.mk-scale-chip.set { color: var(--teal); border-color: var(--teal); }

/* preset scale popover */
.mk-scale-pop {
  position: absolute; top: calc(100% + 8px); right: 0; width: 300px; max-width: 86vw;
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow);
  padding: 14px; z-index: 60; display: none; flex-direction: column; gap: 10px;
}
.mk-scale-pop.open { display: flex; }
.mk-scale-pop-title { font-size: 13px; font-weight: 800; color: var(--text); }
.mk-scale-field { display: flex; flex-direction: column; gap: 5px; font-size: 12px; font-weight: 700; color: var(--muted); }
.mk-scale-field select {
  background: var(--panel-2); color: var(--text); border: 1px solid var(--line); border-radius: 8px;
  padding: 8px 9px; font: inherit; font-size: 13px; cursor: pointer;
}
.mk-scale-custom { display: none; align-items: center; gap: 8px; flex-wrap: wrap; }
.mk-scale-custom.show { display: flex; }
.mk-scale-custom label { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--muted); font-weight: 700; }
.mk-scale-custom input { width: 66px; background: var(--panel-2); color: var(--text); border: 1px solid var(--line); border-radius: 6px; padding: 6px 7px; font: inherit; font-size: 12.5px; }
.mk-scale-eq { color: var(--faint); font-weight: 800; }
.mk-scale-note { margin: 0; font-size: 11px; color: var(--amber); line-height: 1.4; }
.mk-scale-pop-actions { display: flex; justify-content: flex-end; }
.mk-scale-alt { margin: 0; font-size: 11px; color: var(--faint); line-height: 1.45; border-top: 1px solid var(--line-soft); padding-top: 9px; }
.mk-scale-alt b { color: var(--muted); }

/* ---------------- modals ---------------- */
.mk-modal { position: fixed; inset: 0; background: rgba(4,8,12,.66); display: none; align-items: center; justify-content: center; z-index: 100; padding: 20px; }
.mk-modal.show { display: flex; }
.mk-modal-panel {
  background: var(--panel); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow);
  width: min(520px, 100%); padding: 20px;
}
.mk-modal-panel h3 { margin: 0 0 4px; font-size: 17px; }
.mk-modal-panel p.mk-modal-copy { margin: 0 0 16px; color: var(--muted); font-size: 13px; line-height: 1.5; }
.mk-modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; flex-wrap: wrap; }
.mk-modal-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.mk-modal-field label { font-size: 12.5px; color: var(--muted); font-weight: 700; }
.mk-modal-field input[type=text], .mk-modal-field input[type=file] {
  background: var(--panel-2); color: var(--text); border: 1px solid var(--line); border-radius: 8px; padding: 9px 11px; font: inherit; font-size: 14px;
}

/* signature draw pad */
.mk-sigpad-tabs { display: flex; gap: 6px; margin-bottom: 12px; }
.mk-sigpad-tab { border: 1px solid var(--line); background: var(--panel-2); color: var(--muted); border-radius: 8px; padding: 6px 12px; font-size: 12.5px; font-weight: 700; cursor: pointer; }
.mk-sigpad-tab.active { background: var(--accent); border-color: transparent; color: #fff; }
.mk-sigpane { display: none; }
.mk-sigpane.active { display: block; }
#mkSigCanvas { width: 100%; height: 180px; background: #fff; border-radius: 10px; border: 1px solid var(--line); touch-action: none; cursor: crosshair; }
.mk-sig-saved-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.mk-sig-saved {
  border: 1px solid var(--line); border-radius: 8px; background: #fff; padding: 4px; cursor: pointer; position: relative;
  width: 118px; height: 56px; display: flex; align-items: center; justify-content: center;
}
.mk-sig-saved:hover { border-color: var(--accent); }
.mk-sig-saved img { max-width: 100%; max-height: 100%; }
.mk-sig-saved .mk-sig-del { position: absolute; top: -7px; right: -7px; width: 18px; height: 18px; border-radius: 50%; background: var(--red); color: #fff; border: 0; font-size: 11px; font-weight: 900; cursor: pointer; line-height: 1; }
.mk-sig-empty { color: var(--faint); font-size: 12.5px; }
.mk-check { display: inline-flex; align-items: center; gap: 7px; color: var(--muted); font-size: 12.5px; font-weight: 700; cursor: pointer; }

/* toast */
.mk-toast {
  position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%) translateY(12px);
  background: var(--panel-3); color: var(--text); border: 1px solid var(--line);
  border-radius: 10px; padding: 10px 16px; font-size: 13px; font-weight: 700; z-index: 200;
  opacity: 0; pointer-events: none; transition: opacity .18s, transform .18s; box-shadow: var(--shadow);
}
.mk-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---------------- count markers ---------------- */
.mk-annot.mk-count { transform: translate(-50%, -50%); cursor: move; }
.mk-count-glyph { font-weight: 900; line-height: 1; text-shadow: 0 0 2px rgba(255,255,255,.7), 0 1px 2px rgba(0,0,0,.35); user-select: none; pointer-events: none; }
.mk-annot.mk-count .mk-h-del { right: -14px; top: -14px; }

/* ---------------- right slide-in panels (Find / Counts) ---------------- */
.mk-panel {
  position: fixed; top: 50px; right: 0; bottom: 0; width: 300px; max-width: 82vw;
  background: rgba(14,20,32,.98); border-left: 1px solid var(--line);
  display: flex; flex-direction: column; padding: 14px; gap: 10px; z-index: 40;
  transform: translateX(100%); transition: transform .18s ease; box-shadow: -14px 0 32px rgba(0,0,0,.35);
  visibility: hidden; pointer-events: none;
}
.mk-panel.open { transform: translateX(0); visibility: visible; pointer-events: auto; }
.mk-panel-head { display: flex; align-items: center; justify-content: space-between; }
.mk-panel-title { font-size: 14px; font-weight: 800; }
.mk-panel-x { background: none; border: 0; color: var(--muted); font-size: 20px; line-height: 1; cursor: pointer; padding: 0 4px; }
.mk-panel-x:hover { color: var(--text); }
.mk-panel-hint { margin: 0; font-size: 11.5px; color: var(--faint); line-height: 1.45; }

/* Find */
/* (the Find input moved to the top-bar .mk-findbox — the panel is now results-only) */
.mk-search-count { font-size: 12px; font-weight: 700; color: var(--muted); }
.mk-search-results { flex: 1 1 auto; overflow-y: auto; display: flex; flex-direction: column; gap: 3px; }
.mk-search-item { display: flex; gap: 8px; align-items: baseline; padding: 7px 8px; border-radius: 8px; cursor: pointer; font-size: 12.5px; border: 1px solid transparent; }
.mk-search-item:hover { background: var(--panel-2); }
.mk-search-item.current { background: var(--accent-soft); border-color: var(--accent); }
.mk-search-pg { flex: 0 0 auto; color: var(--faint); font-weight: 800; font-size: 11px; }
.mk-search-snip { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-search-snip b { color: var(--text); background: rgba(240,160,31,.28); border-radius: 2px; }

/* search highlights on the page */
.mk-search-hl { position: absolute; background: rgba(240,200,20,.38); border: 1px solid rgba(240,180,10,.7); border-radius: 2px; pointer-events: none; z-index: 3; }
.mk-search-hl.current { background: rgba(255,140,20,.5); border-color: rgba(240,120,10,.95); box-shadow: 0 0 0 1px rgba(240,120,10,.6); }

/* Counts panel */
.mk-count-cats { display: flex; flex-direction: column; gap: 6px; overflow-y: auto; }
.mk-cat { display: flex; align-items: center; gap: 6px; padding: 6px; border: 1px solid var(--line); border-radius: 9px; background: var(--panel-2); cursor: pointer; }
.mk-cat.active { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.mk-cat-color { width: 26px; height: 26px; flex: 0 0 auto; padding: 0; border: 1px solid var(--line); border-radius: 6px; background: none; cursor: pointer; }
.mk-cat-name { flex: 1 1 auto; min-width: 0; background: var(--surface); color: var(--text); border: 1px solid var(--line); border-radius: 6px; padding: 5px 7px; font: inherit; font-size: 12.5px; }
.mk-cat-marker { flex: 0 0 auto; background: var(--surface); color: var(--text); border: 1px solid var(--line); border-radius: 6px; padding: 4px; font-size: 12px; }
.mk-cat-count { flex: 0 0 auto; min-width: 26px; text-align: center; font-weight: 900; color: var(--teal); font-size: 14px; }
.mk-cat-del { flex: 0 0 auto; background: none; border: 0; color: var(--faint); font-size: 16px; line-height: 1; cursor: pointer; padding: 0 2px; }
.mk-cat-del:hover { color: var(--red); }
.mk-count-total { margin-top: auto; padding-top: 10px; border-top: 1px solid var(--line); font-size: 13px; font-weight: 700; color: var(--muted); display: flex; justify-content: space-between; }
.mk-count-total b { color: var(--teal); font-size: 18px; }

/* ---------------- combine PDFs (Test lane) ---------------- */
/* subtle secondary entry point under the drop zone's "Choose PDF" */
.mk-combine-alt {
  display: inline-block; margin-top: 12px; background: none; border: 0;
  color: var(--muted); font-size: 12.5px; font-weight: 700; cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px; font-family: inherit;
}
.mk-combine-alt:hover { color: var(--text); }

.mk-combine-add { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.mk-combine-status { color: var(--faint); font-size: 12px; font-weight: 700; }

.mk-combine-list {
  list-style: none; margin: 0 0 4px; padding: 0;
  display: flex; flex-direction: column; gap: 6px; max-height: 320px; overflow-y: auto;
}
.mk-combine-empty {
  border: 1px dashed var(--chip-border); border-radius: 10px; padding: 22px 14px;
  text-align: center; color: var(--faint); font-size: 12.5px; font-weight: 700;
}
.mk-combine-row {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px;
  border: 1px solid var(--line); border-radius: 10px; background: var(--panel-2);
}
.mk-combine-idx { flex: 0 0 auto; width: 22px; text-align: right; color: var(--faint); font-weight: 800; font-size: 12px; }
.mk-combine-file { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mk-combine-name { color: var(--text); font-size: 13px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mk-combine-pages { color: var(--muted); font-size: 11.5px; font-weight: 700; }
.mk-combine-ctrls { flex: 0 0 auto; display: flex; align-items: center; gap: 4px; }
.mk-combine-ctrls .mk-btn.mk-icon { padding: 4px 7px; min-width: 28px; font-size: 12px; }
.mk-combine-ctrls .mk-combine-x:hover { background: var(--red); border-color: transparent; color: #fff; }

/* ---------------- vector layer (revision clouds + callout leaders) ---------------- */
/* sits UNDER the measure svg so measures/annotations stay on top */
#mkVectorSvg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.mk-vec-line { fill: none; stroke-width: 2; }
.mk-vec-draft { stroke-dasharray: 6 5; }
.mk-vec-hit { fill: none; stroke: transparent; stroke-width: 14; pointer-events: stroke; cursor: pointer; }
.mk-vec-fill { stroke: none; }
.mk-cloud-del {
  position: absolute; transform: translate(-50%, -50%); width: 18px; height: 18px; border-radius: 50%;
  background: var(--red); color: #fff; border: 1.5px solid #fff; font-size: 12px; font-weight: 900; line-height: 15px;
  text-align: center; cursor: pointer; display: none; z-index: 6; box-shadow: 0 2px 6px rgba(0,0,0,.5);
}
.mk-cloud-del.show { display: block; }
.mk-callout-tip { position: absolute; width: 11px; height: 11px; margin: -6px 0 0 -6px; border-radius: 50%; background: var(--accent); border: 1.5px solid #fff; box-shadow: 0 0 0 2px rgba(10,17,25,.55); cursor: move; z-index: 6; display: none; }
.mk-annot.mk-callout.selected .mk-callout-tip, .mk-annot.mk-callout:hover .mk-callout-tip { display: block; }
.mk-callout .mk-text-body { background: rgba(255,255,255,.9); border: 1px solid currentColor; border-radius: 4px; padding: 2px 5px; }

/* stage cursors for the new placement tools */
.mk-stage-wrap.tool-stamp #mkOverlay,
.mk-stage-wrap.tool-cloud #mkOverlay,
.mk-stage-wrap.tool-callout #mkOverlay { cursor: crosshair; }
.mk-stage-wrap.tool-copytext #mkOverlay,
.mk-stage-wrap.tool-autocount #mkOverlay { cursor: crosshair; }

/* ---------------- measure running totals (per type) ---------------- */
.mk-ctx-lbl { color: var(--muted); font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; gap: 6px; }
.mk-ctx-lbl input[type=number] { width: 54px; background: var(--panel-2); color: var(--text); border: 1px solid var(--line); border-radius: 6px; padding: 3px 5px; font: inherit; font-size: 12.5px; }
.mk-ctx-lbl input[type=text] { width: 80px; background: var(--panel-2); color: var(--text); border: 1px solid var(--line); border-radius: 6px; padding: 3px 6px; font: inherit; font-size: 12.5px; }
.mk-ctx-lbl input[type=color] { width: 30px; height: 26px; padding: 0; border: 1px solid var(--line); border-radius: 6px; background: none; cursor: pointer; }
.mk-ctx-select { background: var(--panel-2); color: var(--text); border: 1px solid var(--line); border-radius: 6px; padding: 3px 6px; font: inherit; font-size: 12.5px; cursor: pointer; max-width: 150px; }
.mk-measure-totals { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; max-width: 46vw; }
.mk-measure-tot { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 800; color: var(--text); background: var(--panel-2); border: 1px solid var(--line); border-radius: 999px; padding: 2px 9px; }
.mk-measure-tot .mk-tot-dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }
.mk-measure-tot .mk-tot-val { color: var(--teal); }

/* ---------------- symbol / stamp palette ---------------- */
.mk-sym-panel { width: min(640px, 100%); }
.mk-sym-controls { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 12px; }
.mk-sym-grid, .mk-sym-custom { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 8px; }
.mk-sym-custom { margin-top: 10px; }
.mk-sym-custom:empty { display: none; }
.mk-sym-cell {
  border: 1px solid var(--line); border-radius: 10px; background: var(--panel-2); cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 8px 4px 6px; position: relative;
}
.mk-sym-cell:hover { border-color: var(--accent); background: var(--panel-3); }
.mk-sym-cell.armed { border-color: var(--teal); box-shadow: 0 0 0 2px rgba(53,209,198,.35); }
.mk-sym-cell canvas, .mk-sym-cell img { width: 44px; height: 44px; object-fit: contain; background: #fff; border-radius: 6px; }
.mk-sym-cell .mk-sym-name { font-size: 10px; font-weight: 700; color: var(--muted); text-align: center; line-height: 1.15; }
.mk-sym-cell .mk-sym-x { position: absolute; top: -7px; right: -7px; width: 18px; height: 18px; border-radius: 50%; background: var(--red); color: #fff; border: 0; font-size: 11px; font-weight: 900; cursor: pointer; line-height: 1; }


/* ---------------- OCR row (Find panel) ----------------
   The engine chip and the run-result line are DELIBERATELY separate elements:
   "engine never loaded" must never be able to read like "ran and found nothing". */
.mk-search-ocr { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.mk-ocr-engine { font-size: 11px; font-weight: 800; letter-spacing: .02em; padding: 4px 8px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel-2); color: var(--faint); }
.mk-ocr-engine.loading { color: var(--amber); border-color: rgba(240,160,31,.5); background: rgba(240,160,31,.10); }
.mk-ocr-engine.ready { color: var(--green); border-color: rgba(39,179,84,.5); background: rgba(39,179,84,.10); }
.mk-ocr-engine.failed { color: var(--red); border-color: rgba(224,82,82,.6); background: rgba(224,82,82,.12); }
.mk-ocr-status { font-size: 12px; font-weight: 800; color: var(--muted); }
.mk-ocr-status.ok { color: var(--teal); }
.mk-ocr-status.bad { color: var(--red); }
.mk-ocr-detail { font-size: 11px; color: var(--faint); line-height: 1.45; }
.mk-ocr-bad { color: var(--red) !important; }
/* engine load / run progress (blocking modal) */
.mk-ocr-bar { height: 8px; border-radius: 999px; background: var(--panel-2); border: 1px solid var(--line); overflow: hidden; }
.mk-ocr-bar-fill { height: 100%; width: 0; background: linear-gradient(90deg, var(--accent), var(--teal)); transition: width .18s linear; }
.mk-ocr-bar-fill.indeterminate { animation: mkOcrPulse 1.1s ease-in-out infinite; }
@keyframes mkOcrPulse { 0%,100% { opacity: .45; } 50% { opacity: 1; } }
.mk-ocr-phase { margin: 8px 0 0; font-size: 11.5px; color: var(--faint); line-height: 1.45; word-break: break-word; }
/* per-result provenance badge — OCR text is NOT the same trust level as real PDF text */
.mk-search-src { flex: 0 0 auto; margin-left: auto; font-size: 9.5px; font-weight: 900; letter-spacing: .04em; padding: 1px 5px; border-radius: 4px; border: 1px solid var(--line); color: var(--faint); }
.mk-search-src.ocr { color: var(--amber); border-color: rgba(240,160,31,.55); background: rgba(240,160,31,.12); }
.mk-search-src.annot { color: var(--teal); border-color: rgba(53,209,198,.45); background: rgba(53,209,198,.10); }
/* OCR-sourced highlights read differently on the sheet (dashed = lower confidence) */
.mk-search-hl.ocr { background: rgba(240,160,31,.30); border-style: dashed; border-color: rgba(240,160,31,.9); }

/* ---------------- visual search (auto-count) ---------------- */
/* non-blocking: dock the panel at the bottom with NO dark backdrop, so the plan
   and the on-page match boxes stay visible and you can re-drag a new seed box. */
#mkVsModal { background: transparent; align-items: flex-end; pointer-events: none; }
#mkVsModal .mk-modal-panel { pointer-events: auto; margin-bottom: 18px; }
.mk-vs-panel { width: min(560px, 100%); }
.mk-vs-body { display: flex; gap: 16px; align-items: flex-start; }
.mk-vs-preview { width: 120px; height: 120px; flex: 0 0 auto; background: #fff; border: 1px solid var(--line); border-radius: 10px; image-rendering: pixelated; }
.mk-vs-controls { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.mk-vs-controls .mk-ctx-lbl { flex-direction: column; align-items: flex-start; gap: 5px; }
.mk-vs-controls input[type=range] { width: 100%; }
.mk-vs-threshval { color: var(--teal); font-weight: 800; }
.mk-vs-catwrap { font-size: 12.5px; color: var(--muted); font-weight: 700; }
.mk-vs-catwrap b { color: var(--text); }
.mk-vs-status { font-size: 12.5px; color: var(--muted); line-height: 1.45; }
/* on-page visual-search hit preview boxes */
.mk-vs-hit { position: absolute; border: 1.5px solid var(--teal); background: rgba(53,209,198,.14); border-radius: 2px; pointer-events: none; z-index: 4; }
.mk-vs-seed { position: absolute; border: 2px solid var(--amber); border-radius: 2px; pointer-events: none; z-index: 4; }
/* rubber-band marquee shared by copytext + autocount seed pick */
.mk-marquee { position: absolute; border: 1.5px dashed var(--accent); background: var(--accent-soft); border-radius: 2px; pointer-events: none; z-index: 5; }

/* copy-text popover */
.mk-copy-pop {
  position: absolute; z-index: 45; background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: var(--shadow); padding: 10px; width: min(320px, 60vw); display: none; flex-direction: column; gap: 8px;
}
.mk-copy-pop.show { display: flex; }
.mk-copy-text { max-height: 120px; overflow-y: auto; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 7px 9px; font-size: 12.5px; color: var(--text); white-space: pre-wrap; word-break: break-word; }
.mk-copy-actions { display: flex; justify-content: flex-end; gap: 8px; }

.hidden { display: none !important; }

/* ==========================================================================
   AUTO-COUNT v2 (2026-07-26) — matches the takeoff viewer's auto-count:
   rotation/mirror variants, scan-all-pages with progress + cancel, and a
   POST-SCAN sensitivity filter. No categories here, deliberately (see the
   header comment on markup.js section 8).
   ========================================================================== */
.mk-vs-panel { width: min(660px, 100%); }
.mk-vs-thumbwrap { flex: 0 0 auto; display: flex; flex-direction: column; gap: 5px; align-items: center; }
.mk-vs-varnote { font-size: 9.5px; letter-spacing: .4px; text-transform: uppercase; color: var(--teal); }
.mk-vs-scope { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.mk-vs-scope .mk-ctx-lbl { flex: 0 0 auto; flex-direction: row; }
.mk-btn.mk-seg { padding: 3px 9px; font-size: 11.5px; }
.mk-btn.mk-seg.mk-on { background: var(--teal); border-color: var(--teal); color: #04201e; }
/* progress + cancel */
.mk-vs-prog { display: flex; align-items: center; gap: 9px; }
.mk-vs-prog[hidden] { display: none; }
.mk-vs-prog-bar { flex: 1 1 auto; height: 6px; border-radius: 3px; overflow: hidden;
  background: rgba(255,255,255,.08); border: 1px solid var(--mk-line, rgba(255,255,255,.14)); }
.mk-vs-prog-bar > i { display: block; height: 100%; width: 0; background: var(--teal);
  transition: width .12s linear; }
.mk-vs-prog-t { font-size: 10.5px; color: var(--muted); white-space: nowrap;
  font-variant-numeric: tabular-nums; }
.mk-btn.mk-vs-cancelscan { padding: 2px 9px; font-size: 11.5px; }
/* post-scan filter line */
.mk-vs-sensrow input[type=range]:disabled { opacity: .35; }
.mk-vs-filter { font-size: 11px; color: var(--muted); line-height: 1.45; }
/* per-page breakdown */
.mk-vs-pages { border: 1px solid rgba(255,255,255,.14); border-radius: 8px;
  background: rgba(255,255,255,.03); overflow: hidden; }
.mk-vs-pages[hidden] { display: none; }
.mk-vs-pages-head { padding: 5px 10px; font-size: 9.5px; letter-spacing: .5px;
  text-transform: uppercase; color: var(--muted); border-bottom: 1px solid rgba(255,255,255,.12); }
.mk-vs-pages-list { max-height: 150px; overflow-y: auto; }
.mk-vs-pages-row { display: flex; align-items: center; gap: 8px; padding: 3px 10px;
  font-size: 12px; color: var(--muted); cursor: pointer; }
.mk-vs-pages-row:hover { background: rgba(255,255,255,.06); color: var(--text); }
.mk-vs-pages-row .n { margin-left: auto; color: var(--teal); font-variant-numeric: tabular-nums; }
.mk-vs-pages-row .t { flex: 0 0 44px; text-align: right; font-size: 10.5px;
  font-variant-numeric: tabular-nums; opacity: .7; }
.mk-vs-pages-skip { padding: 6px 10px; font-size: 11px; line-height: 1.45; color: #ffd9ec;
  border-top: 1px solid rgba(255,255,255,.12); }
/* candidate boxes: included solid, filtered-out ghosted, manual ones dashed.
   They are CLICKABLE now (include/exclude by hand), so pointer-events is on. */
.mk-vs-hit { pointer-events: auto; cursor: pointer; }
.mk-vs-hit.mk-vs-off { opacity: .3; }
.mk-vs-hit.mk-vs-man { border-style: dashed; border-width: 2px; }