/* =============================================================
   One Map · the selection stack  (ll-one-map-stack.css)
   Survey pegs: a two-digit number ties the map plate, the tray peg and
   the panel strip together. Active = accent fill, ink text; the rest =
   ink glass with an orange hairline. Hairlines are inset shadows, never
   a single-side border. Tokens come from ll-one-map.css.
   ============================================================= */

/* ---------- pegs on the map ---------- */
#omStackG path { fill: none; stroke: var(--om-acc-2); stroke-width: 1.5; stroke-linejoin: round; opacity: .62; }
.om-plates { position: absolute; inset: 0; pointer-events: none; z-index: 12; overflow: hidden; }
.om-plate { position: absolute; left: 0; top: 0; display: flex; align-items: center; gap: 6px; height: 22px; padding: 0 7px 0 4px; border: none; border-radius: 7px;
  background: rgba(15, 18, 24, 0.84); color: var(--om-acc-2); font: 600 10px var(--om-mono); letter-spacing: .04em; white-space: nowrap;
  box-shadow: inset 0 0 0 1px rgba(255, 103, 37, 0.45), 0 8px 20px rgba(0, 0, 0, 0.45); backdrop-filter: blur(8px);
  pointer-events: auto; cursor: var(--om-cur-pointer, pointer); will-change: transform;
  transition: background .18s var(--om-ease), color .18s var(--om-ease), box-shadow .18s var(--om-ease); }
.om-plate-n { display: inline-flex; align-items: center; justify-content: center; min-width: 16px; height: 16px; padding: 0 3px; border-radius: 4px; background: rgba(255, 103, 37, 0.14); font-weight: 700; }
.om-plate-tx { display: none; color: var(--om-tx); }
.om-plate:hover .om-plate-tx, .om-plate:focus-visible .om-plate-tx, .om-plate.is-active .om-plate-tx { display: inline; }
.om-plate:hover { background: rgba(23, 28, 37, 0.94); }
.om-plate.is-active { background: var(--om-acc); color: var(--om-ink); box-shadow: 0 8px 22px rgba(255, 103, 37, 0.35); }
.om-plate.is-active .om-plate-n { background: rgba(19, 23, 30, 0.22); }
.om-plate.is-active .om-plate-tx { color: var(--om-ink); }
.om-plate-stem { position: absolute; left: 10px; top: 100%; width: 1px; height: 14px; background: linear-gradient(180deg, var(--om-acc-2), rgba(255, 142, 82, 0)); }
.om-plate-stem::after { content: ''; position: absolute; left: -2.5px; bottom: -3px; width: 6px; height: 6px; border-radius: 99px; background: var(--om-acc-2); box-shadow: 0 0 0 2px rgba(15, 18, 24, 0.7); }
.om-plate.is-active .om-plate-stem { background: linear-gradient(180deg, var(--om-acc), rgba(255, 103, 37, 0)); }
.om-plate.is-active .om-plate-stem::after { background: var(--om-acc); }
.om-plate.is-point { color: var(--om-info); box-shadow: inset 0 0 0 1px rgba(131, 231, 238, 0.4), 0 8px 20px rgba(0, 0, 0, 0.45); }
.om-plate.is-point .om-plate-n { background: rgba(131, 231, 238, 0.14); }
.om-plate.is-point .om-plate-stem { background: linear-gradient(180deg, var(--om-info), rgba(131, 231, 238, 0)); }
.om-plate.is-point .om-plate-stem::after { border-radius: 1px; transform: rotate(45deg); background: var(--om-info); }
.om-plate.is-point.is-active { background: var(--om-info); color: var(--om-ink); box-shadow: 0 8px 22px rgba(131, 231, 238, 0.3); }
.om-plate.is-off { display: none; }
.om-plate:focus-visible { outline: 2px solid var(--om-acc-2); outline-offset: 2px; }

/* ---------- the tray: numbered pegs ---------- */
.om-tray-stack { pointer-events: auto; display: flex; align-items: center; gap: 3px; padding: 4px; border-radius: 999px; background: rgba(19, 23, 30, 0.88); backdrop-filter: blur(14px);
  box-shadow: inset 0 0 0 1px rgba(42, 51, 62, 0.95), 0 10px 26px rgba(0, 0, 0, 0.4); animation: omPop .22s var(--om-pop); }
.om-tray-peg { display: flex; align-items: center; gap: 6px; height: 26px; padding: 0 5px 0 4px; border: none; border-radius: 999px; background: none; color: var(--om-tx-2);
  font: 600 10.5px var(--om-mono); white-space: nowrap; cursor: var(--om-cur-pointer, pointer); transition: background .16s var(--om-ease), color .16s var(--om-ease); }
.om-tray-peg b { min-width: 18px; height: 18px; padding: 0 3px; border-radius: 99px; display: inline-flex; align-items: center; justify-content: center; background: rgba(255, 103, 37, 0.12); color: var(--om-acc-2); font-weight: 700; }
.om-tray-peg i { font-style: normal; font-size: 9.5px; color: var(--om-tx-5); padding: 0 3px; line-height: 1; }
.om-tray-peg:hover { color: var(--om-tx); background: rgba(255, 255, 255, 0.06); }
.om-tray-peg:hover i { color: var(--om-flag); }
.om-tray-peg.is-active { color: var(--om-acc-2); box-shadow: inset 0 0 0 1px rgba(255, 103, 37, 0.5); }
.om-tray-peg.is-active b { background: var(--om-acc); color: var(--om-ink); }
.om-tray-peg.is-point b { background: rgba(131, 231, 238, 0.14); color: var(--om-info); }
.om-tray-peg.is-point.is-active { color: var(--om-info); box-shadow: inset 0 0 0 1px rgba(131, 231, 238, 0.45); }
.om-tray-peg.is-point.is-active b { background: var(--om-info); color: var(--om-ink); }
.om-tray-peg.is-more { color: var(--om-tx-3); padding: 0 8px; }
.om-tray-clear { height: 26px; padding: 0 10px; border: none; border-radius: 999px; background: none; color: var(--om-tx-3); font: 600 10.5px 'Inter Tight', system-ui, sans-serif; cursor: var(--om-cur-pointer, pointer); }
.om-tray-clear:hover { color: var(--om-flag); background: rgba(255, 255, 255, 0.05); }
.om-tray-chip.is-stack { border: none; color: var(--om-acc-2); box-shadow: inset 0 0 0 1px rgba(255, 103, 37, 0.4), 0 10px 26px rgba(0, 0, 0, 0.4); cursor: var(--om-cur-pointer, pointer); }
.om-tray-chip.is-stack .mi { font-size: 13px; color: var(--om-acc-2); }

/* ---------- the panel: strip of cells ---------- */
.om-stack { display: flex; gap: 6px; margin: 12px -16px 0; padding: 2px 16px 3px; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; }
.om-stack::-webkit-scrollbar { display: none; }
.om-stack-cell { flex: none; position: relative; display: flex; align-items: center; gap: 8px; min-width: 132px; max-width: 172px; height: 44px; padding: 0 26px 0 6px; border: none; border-radius: 12px;
  background: rgba(27, 33, 43, 0.6); color: var(--om-tx-2); text-align: left; scroll-snap-align: start; cursor: var(--om-cur-pointer, pointer);
  box-shadow: inset 0 0 0 1px rgba(42, 51, 62, 0.9); transition: box-shadow .18s var(--om-ease), background .18s var(--om-ease), color .18s var(--om-ease); }
.om-stack-cell:hover { background: rgba(35, 42, 55, 0.7); color: var(--om-tx); }
.om-stack-cell:focus-visible { outline: 2px solid var(--om-acc-2); outline-offset: 1px; }
.om-stack-cell.is-active { color: var(--om-tx); background: linear-gradient(180deg, rgba(255, 103, 37, 0.14), rgba(255, 103, 37, 0.04)); box-shadow: inset 0 0 0 1px rgba(255, 103, 37, 0.55), 0 10px 24px -14px rgba(255, 103, 37, 0.7); }
.om-stack-n { flex: none; width: 24px; height: 24px; border-radius: 7px; display: inline-flex; align-items: center; justify-content: center; font: 700 10.5px var(--om-mono); background: rgba(255, 103, 37, 0.12); color: var(--om-acc-2); }
.om-stack-cell.is-active .om-stack-n { background: var(--om-acc); color: var(--om-ink); }
.om-stack-cell.is-point .om-stack-n { background: rgba(131, 231, 238, 0.14); color: var(--om-info); }
.om-stack-cell.is-point.is-active { box-shadow: inset 0 0 0 1px rgba(131, 231, 238, 0.5); background: linear-gradient(180deg, rgba(131, 231, 238, 0.12), rgba(131, 231, 238, 0.03)); }
.om-stack-cell.is-point.is-active .om-stack-n { background: var(--om-info); color: var(--om-ink); }
.om-stack-tx { display: flex; flex-direction: column; min-width: 0; }
.om-stack-tx i { font: 600 12px var(--om-mono); font-style: normal; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.om-stack-tx em { font: 500 9.5px 'Inter Tight', system-ui, sans-serif; font-style: normal; color: var(--om-tx-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.om-stack-dots { position: absolute; right: 9px; bottom: 7px; display: flex; gap: 3px; }
.om-stack-dots i { width: 5px; height: 5px; border-radius: 99px; box-shadow: inset 0 0 0 1px var(--om-tx-4); }
.om-stack-dots i.is-checks.is-done { background: var(--om-tx-2); box-shadow: none; }
.om-stack-dots i.is-owners.is-done { background: var(--om-clear); box-shadow: none; }
.om-stack-dots i.is-flags:not([data-n="0"]) { background: var(--om-flag); box-shadow: none; }
.om-stack-dots i.is-flags.is-caut { background: var(--om-caut); box-shadow: none; }
.om-stack-x { position: absolute; right: 7px; top: 6px; font-size: 9px; line-height: 1; color: var(--om-tx-5); opacity: 0; transition: opacity .15s var(--om-ease); }
.om-stack-cell:hover .om-stack-x, .om-stack-cell:focus-within .om-stack-x { opacity: 1; }
.om-stack-x:hover { color: var(--om-flag); }
.om-peek-n { font: 700 11px var(--om-mono); color: var(--om-acc-2); margin-right: 6px; }

/* ---------- the panel: batch block ---------- */
.om-batch { margin: 0 0 12px; padding: 10px 10px 8px; border-radius: 14px; background: rgba(27, 33, 43, 0.5); box-shadow: inset 0 0 0 1px rgba(42, 51, 62, 0.8); }
.om-batch-eyebrow { display: flex; align-items: center; gap: 7px; padding: 0 2px 8px; }
.om-batch-eyebrow i { width: 14px; height: 2px; background: var(--om-acc-2); flex: none; }
.om-batch-eyebrow b { font: 600 9.5px var(--om-mono); letter-spacing: .14em; color: var(--om-acc-2); }
.om-batch-eyebrow em { font: 500 9.5px var(--om-mono); font-style: normal; color: var(--om-tx-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.om-batch-act { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-height: 42px; padding: 6px 8px; border: none; border-radius: 10px; background: none; color: var(--om-tx); text-align: left; cursor: var(--om-cur-pointer, pointer); transition: background .15s var(--om-ease); }
.om-batch-act:hover { background: rgba(255, 255, 255, 0.05); }
.om-batch-act:disabled { opacity: .5; cursor: default; }
.om-batch-act:disabled:hover { background: none; }
.om-batch-tx { min-width: 0; }
.om-batch-tx b { display: block; font: 600 12.5px 'Inter Tight', system-ui, sans-serif; }
.om-batch-tx i { display: block; font: 400 10px var(--om-mono); font-style: normal; color: var(--om-tx-3); margin-top: 2px; }
.om-batch-cr { flex: none; font: 600 9.5px var(--om-mono); color: var(--om-acc-2); background: rgba(255, 103, 37, 0.1); box-shadow: inset 0 0 0 1px rgba(255, 103, 37, 0.35); border-radius: 5px; padding: 3px 6px; white-space: nowrap; }
.om-batch-cr.is-free { color: var(--om-tx-3); background: none; box-shadow: inset 0 0 0 1px var(--om-stroke); }
.om-batch-act.is-primary { background: linear-gradient(180deg, rgba(255, 103, 37, 0.10), rgba(255, 103, 37, 0.03)); box-shadow: inset 0 0 0 1px rgba(255, 103, 37, 0.28); margin-top: 4px; }
.om-batch-act.is-primary:hover { background: linear-gradient(180deg, rgba(255, 103, 37, 0.16), rgba(255, 103, 37, 0.05)); }
.om-batch-prog { display: flex; align-items: center; gap: 8px; margin: 6px 4px 2px; font: 500 10px var(--om-mono); color: var(--om-tx-3); }
.om-batch-prog i { flex: 1; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--om-acc) var(--p, 0%), var(--om-stroke) 0); transition: background .3s var(--om-ease); }
.om-batch-prog span { white-space: nowrap; }

/* ---------- the tools rail: Add toggle ---------- */
.om-tools-add { display: flex; align-items: center; gap: 5px; height: 34px; padding: 0 10px 0 8px; border: none; border-radius: 9px; background: none; color: var(--om-tx-3);
  font: 600 11.5px/1 'Inter Tight', system-ui, sans-serif; cursor: var(--om-cur-pointer, pointer); white-space: nowrap; transition: background .18s var(--om-ease), color .18s var(--om-ease); }
.om-tools-add:hover { color: var(--om-tx); background: rgba(255, 255, 255, 0.07); }
.om-tools-add-gl { font: 700 15px/1 var(--om-mono); }
.om-tools-add.is-armed { color: var(--om-acc-2); background: rgba(255, 103, 37, 0.14); box-shadow: inset 0 0 0 1px rgba(255, 103, 37, 0.5); }
.om-tools-add-n { min-width: 16px; height: 16px; border-radius: 99px; background: var(--om-acc); color: var(--om-ink); font: 700 9px var(--om-mono); display: inline-flex; align-items: center; justify-content: center; padding: 0 4px; }
.om-tools.is-armed .om-tools-add { opacity: .45; }

/* ---------- the touch Add / Replace chip ---------- */
.om-addchip { position: absolute; z-index: 48; display: flex; gap: 4px; padding: 4px; border-radius: 12px; background: rgba(15, 18, 24, 0.92); backdrop-filter: blur(12px);
  box-shadow: inset 0 0 0 1px rgba(42, 51, 62, 0.95), 0 14px 34px rgba(0, 0, 0, 0.5); animation: omPop .2s var(--om-pop); }
.om-addchip button { height: 38px; padding: 0 14px; border: none; border-radius: 9px; font: 700 12.5px 'Inter Tight', system-ui, sans-serif; cursor: pointer; }
.om-addchip-add { background: var(--om-acc); color: var(--om-ink); display: flex; align-items: center; gap: 5px; }
.om-addchip-add span { font: 700 15px/1 var(--om-mono); }
.om-addchip-rep { background: none; color: var(--om-tx-2); box-shadow: inset 0 0 0 1px var(--om-stroke); }
.om-addchip-tail { position: absolute; left: 50%; bottom: -5px; width: 10px; height: 10px; margin-left: -5px; background: rgba(15, 18, 24, 0.92); transform: rotate(45deg); box-shadow: 1px 1px 0 rgba(42, 51, 62, 0.95); }

/* ---------- small screens ---------- */
@media (max-width: 768px) {
  .om-plate { height: 26px; padding: 0 6px 0 5px; }
  .om-plate.is-active .om-plate-tx { display: none; }
  .om-plate-stem { top: 100%; height: 12px; }
  .om-stack { margin: 10px -14px 0; padding: 2px 14px 3px; }
  .om-stack-cell { min-width: 120px; height: 42px; }
  .om-stack-x { opacity: 1; }
  .om-batch-act { min-height: 46px; }
  .om-tools-add .om-tools-add-tx { display: none; }
  .om-tools-add.is-armed .om-tools-add-tx { display: inline; }
  .om-tools-add { padding: 0 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .om-plate, .om-stack-cell, .om-tray-peg, .om-batch-act { transition: none; }
  .om-tray-stack, .om-addchip { animation: none; }
}

/* The peg pill never grows past the message bar; the painter folds pegs that do not fit. */
.om-tray-stack { max-width: 100%; box-sizing: border-box; }
.om-tray-peg, .om-tray-peg.is-more, .om-tray-clear { flex: none; white-space: nowrap; }