/* ---- scout-tag: the Scout tag mode panel ------------------------------------
   Ported from ng-extend (branch eyewire-ii-community),
   src/components/TagModePanel.vue, the panel EyeWire II scouts use to drop
   Cut / Extend / Other tags on the data. Class prefix renamed mechanically
   from nge-tagmode to scouttag; every value carried as shipped.

   Documented deviations, per the porting rule:
   - Orbitron is named in the font stacks exactly as upstream, but is not
     bundled (this repo allows no CDN), so it renders in the Inter or system
     fallback unless the host page provides it.
   - The upstream chip icons (scythe and tracer PNGs) and the success box's
     crossed-scythes render are product art and are not carried; the pin SVG,
     which is drawn in code, is.
   - The wrap is absolute inside a demo stage rather than fixed to the
     viewport: the upstream panel teleports to body and floats over the whole
     app, the demo floats over its stage.
   Every hover state here ships its .holo-on twin, per the tap rule. */

.scouttag-wrap {
  position: absolute;
  z-index: 40;
  width: 340px;
  max-width: calc(100% - 24px);
}

/* Armed: the panel glows and the stage cursor becomes a crosshair, so there
   is no doubt the next click drops a tag. */
.scouttag-stage.scouttag-stage--armed { cursor: crosshair; }
.scouttag-wrap--armed .scouttag {
  border-color: rgba(245, 209, 66, 0.85);
  box-shadow: 0 6px 28px rgba(0, 0, 0, 0.55), 0 0 18px rgba(245, 209, 66, 0.35);
}

/* The box. Materialize as shipped: arrives blurred and slightly too large,
   settles through a soft overshoot at 60 percent. The overbright flash of
   the original scifi-ui curve was softened upstream because it read as an
   error strobe on a large panel; the softened curve is what ships, so the
   softened curve is what is ported. */
.scouttag {
  position: relative;
  max-height: calc(100% - 20px);
  overflow-y: auto;
  padding: 12px 14px;
  border-radius: 10px;
  background: rgba(6, 10, 20, 0.95);
  border: 1px solid rgba(245, 209, 66, 0.35);
  box-shadow: 0 6px 28px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(245, 209, 66, 0.08);
  backdrop-filter: blur(8px);
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-family: 'Inter', 'Segoe UI', sans-serif;
  animation: scouttag-materialize 0.8s cubic-bezier(0.16, 1, 0.3, 1) both;
  transition: border-color 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
}
.scouttag > * { transition: opacity 0.28s ease; }
.scouttag-out {
  animation: scouttag-materialize 0.5s cubic-bezier(0.16, 1, 0.3, 1) reverse both;
}
/* Expanding from the slim strip: the pop-in materialize is suppressed and
   the beam acts as a mask, a clip-path driven from the draw's progress
   unrolls the finished box downward in step with the light. */
.scouttag--drawing { animation: none; }
/* While the streams are still charging: dim body, no pop-in. The beams
   phase clears this and the body eases in with the light. */
.scouttag--building {
  animation: none;
  opacity: 0.14;
  transform: scale(0.985);
}
.scouttag--success { transition: opacity 0.45s ease, transform 0.45s ease; }
/* The send-off: the materialize played back hard, the box blooms bright,
   blurs, and lifts away. The beam then draws the form back in. */
.scouttag--spinout {
  animation: scouttag-dematerialize 0.42s cubic-bezier(0.7, 0, 0.84, 0.16) both !important;
  pointer-events: none;
}
@keyframes scouttag-dematerialize {
  0%   { opacity: 1; transform: scale(1) translateY(0); filter: blur(0) brightness(1); }
  40%  { opacity: 1; transform: scale(0.99); filter: blur(0) brightness(1.1); }
  70%  { opacity: 0.6; filter: blur(3px) brightness(1.5); }
  100% { opacity: 0; transform: scale(1.04) translateY(-10px); filter: blur(20px) brightness(3); }
}
.scouttag--frameless {
  border-color: transparent !important;
  box-shadow: none !important;
}
@keyframes scouttag-materialize {
  0%   { opacity: 0; transform: scale(1.025) translateY(-8px); filter: blur(14px); }
  60%  { opacity: 1; transform: scale(0.995); filter: blur(0); }
  100% { opacity: 1; transform: scale(1) translateY(0); filter: blur(0); }
}
@media (prefers-reduced-motion: reduce) {
  .scouttag, .scouttag-out, .scouttag--spinout { animation: none !important; }
}

.scouttag-head { display: flex; align-items: center; cursor: grab; }
.scouttag-head:active { cursor: grabbing; }
.scouttag-pin { display: inline-flex; vertical-align: -2px; }
.scouttag-pin svg { filter: drop-shadow(0 0 4px rgba(53, 181, 255, 0.55)); }
.scouttag-title {
  flex: 1;
  font-family: 'Orbitron', 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: #f5d142;
  user-select: none;
}
.scouttag-close {
  background: none; border: none; color: #889; font-size: 18px;
  line-height: 1; cursor: pointer; padding: 0 2px;
}
.scouttag-close:hover, .scouttag-close.holo-on, .scouttag-close:focus-visible { color: #fff; }
.scouttag-hint { font-size: 11px; color: rgba(255, 255, 255, 0.55); line-height: 1.45; }
.scouttag-hint b { color: #f5d142; font-weight: 600; }

.scouttag-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.scouttag-chip {
  padding: 5px 12px;
  border-radius: 12px;
  font-size: 12.5px;
  cursor: pointer;
  background: rgba(245, 209, 66, 0.06);
  border: 1px solid rgba(245, 209, 66, 0.28);
  color: #dcb;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
/* Type colors match the light: blue Cut, green Extend, purple Other. */
.scouttag-chip--cut { background: rgba(53, 181, 255, 0.08); border-color: rgba(53, 181, 255, 0.35); color: #9fd6ff; }
.scouttag-chip--cut[aria-pressed="true"] { background: rgba(53, 181, 255, 0.2); border-color: rgba(53, 181, 255, 0.75); color: #d8efff; }
.scouttag-chip--ext { background: rgba(96, 224, 128, 0.08); border-color: rgba(96, 224, 128, 0.32); color: #9fe8b0; }
.scouttag-chip--ext[aria-pressed="true"] { background: rgba(96, 224, 128, 0.2); border-color: rgba(96, 224, 128, 0.7); color: #d9ffe3; }
.scouttag-chip--other { background: rgba(200, 150, 255, 0.08); border-color: rgba(200, 150, 255, 0.32); color: #d9bdfa; }
.scouttag-chip--other[aria-pressed="true"] { background: rgba(200, 150, 255, 0.2); border-color: rgba(200, 150, 255, 0.7); color: #f0e2ff; }

.scouttag-note {
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  color: #dde;
  font-size: 12px;
  padding: 6px 9px;
  font-family: inherit;
}
.scouttag-note:focus { outline: none; border-color: rgba(245, 209, 66, 0.45); }

.scouttag-foot { display: flex; align-items: center; gap: 8px; }
.scouttag-coords { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.scouttag-coords-label {
  font-family: 'Orbitron', 'Inter', sans-serif;
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(160, 185, 220, 0.75);
}
.scouttag-coords-vals {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  white-space: nowrap;
  color: #cfe0f5;
}
.scouttag-coords-vals b { font-weight: 600; color: #e9c46a; }
.scouttag--pending .scouttag-coords-vals b { color: #35b5ff; }
.scouttag-actions-row { display: flex; gap: 8px; }
.scouttag-arm {
  flex: 1;
  padding: 7px 10px;
  border-radius: 7px;
  font-size: 12px;
  cursor: pointer;
  background: rgba(120, 140, 255, 0.1);
  border: 1px solid rgba(120, 140, 255, 0.35);
  color: #cdf;
  white-space: nowrap;
  font-family: inherit;
}
.scouttag-arm--on {
  background: rgba(245, 209, 66, 0.18);
  border-color: rgba(245, 209, 66, 0.65);
  color: #ffe9a0;
  animation: scouttag-arm-pulse 1.2s ease-in-out infinite;
}
@keyframes scouttag-arm-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(245, 209, 66, 0.25); }
  50%      { box-shadow: 0 0 0 5px rgba(245, 209, 66, 0.06); }
}
@media (prefers-reduced-motion: reduce) {
  .scouttag-arm--on, .scouttag-mini-act--on { animation: none; }
}
.scouttag-btn {
  padding: 6px 12px;
  border-radius: 7px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  background: rgba(245, 209, 66, 0.14);
  border: 1px solid rgba(245, 209, 66, 0.45);
  color: #ffe9a0;
  font-family: inherit;
}
.scouttag-btn:hover, .scouttag-btn.holo-on, .scouttag-btn:focus-visible { background: rgba(245, 209, 66, 0.24); }

/* The flash is a holo pill, not a bare yellow string. */
.scouttag-flash {
  align-self: center;
  font-family: 'Orbitron', 'Inter', sans-serif;
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #cfe9ff;
  background: rgba(6, 12, 24, 0.9);
  border: 1px solid rgba(53, 181, 255, 0.45);
  border-radius: 999px;
  padding: 5px 14px;
  box-shadow: 0 0 14px rgba(53, 181, 255, 0.2), inset 0 0 10px rgba(53, 181, 255, 0.07);
  animation: scouttag-flash-in 0.25s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes scouttag-flash-in {
  0%   { opacity: 0; transform: translateY(4px) scale(0.96); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* ---- collapsed corner strip ---- */
.scouttag-mini {
  position: relative;
  display: flex;
  align-items: center;
  gap: 4px;
  /* sizes to its own content so the border always encloses every button */
  width: max-content;
  max-width: calc(100vw - 24px);
  /* extra room on the right so the cursor has somewhere calm to land */
  padding: 5px 14px 5px 7px;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(4, 6, 14, 0.94) 0%, rgba(8, 12, 24, 0.92) 100%);
  border: 1px solid rgba(53, 181, 255, 0.35);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.5), 0 0 12px rgba(53, 181, 255, 0.12);
  backdrop-filter: blur(8px);
}
.scouttag-mini-grip {
  display: inline-flex;
  cursor: grab;
  padding: 2px 3px;
  font-size: 14px;
  user-select: none;
}
.scouttag-mini-grip:active { cursor: grabbing; }
.scouttag-mini-chip {
  font-family: 'Orbitron', 'Inter', sans-serif;
  font-size: 10px;
  letter-spacing: 0.06em;
  padding: 4px 8px;
  border-radius: 7px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.04);
  color: #cfe3ff;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.scouttag-mini-chip[aria-pressed="true"] {
  border-color: rgba(53, 181, 255, 0.8);
  background: rgba(53, 181, 255, 0.14);
  color: #fff;
  box-shadow: 0 0 8px rgba(53, 181, 255, 0.25);
}
.scouttag-mini-act {
  font-size: 13px;
  line-height: 1;
  padding: 4px 7px;
  border-radius: 7px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.04);
  color: #cfe3ff;
  cursor: pointer;
}
.scouttag-mini-act--on {
  border-color: rgba(53, 181, 255, 0.9);
  background: rgba(53, 181, 255, 0.2);
  animation: scouttag-arm-pulse 1.1s ease-in-out infinite;
}
.scouttag-mini-submit { color: #7dffb0; border-color: rgba(125, 255, 176, 0.35); }
.scouttag-mini-submit:hover, .scouttag-mini-submit.holo-on,
.scouttag-mini-submit:focus-visible { background: rgba(125, 255, 176, 0.12); }
.scouttag-mini-close { color: #a8b6cf; }
.scouttag-mini-close:hover, .scouttag-mini-close.holo-on, .scouttag-mini-close:focus-visible {
  color: #fff; border-color: rgba(224, 96, 96, 0.5); background: rgba(224, 96, 96, 0.12);
}
.scouttag-flash--mini {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  white-space: nowrap;
}

/* ---- success box ---- */
.scouttag--success {
  align-items: center;
  box-sizing: border-box;
  justify-content: center;
  gap: 10px;
  padding: 20px 16px;
  cursor: pointer;
  /* no border on the celebration box; transparent, not none, so the
     measured footprint still lines up */
  border-color: transparent;
}
.scouttag-success-glyph svg {
  width: 84px;
  height: 84px;
  filter: drop-shadow(0 0 10px rgba(53, 181, 255, 0.55));
}
.scouttag-success-title {
  font-family: 'Orbitron', 'Inter', sans-serif;
  font-size: 13px;
  letter-spacing: 0.1em;
  color: #dff1ff;
  text-shadow: 0 0 12px rgba(53, 181, 255, 0.45);
}
.scouttag-success-pos { font-size: 11.5px; color: rgba(158, 205, 255, 0.75); }
.scouttag-success-hint { font-size: 10.5px; color: rgba(255, 255, 255, 0.45); margin-top: 4px; }

/* ---- the demo stage this panel floats over (demo chrome, not upstream) ---- */
.scouttag-stage {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  min-height: 420px;
  background: #05070c center / cover no-repeat;
  box-shadow: inset 0 0 0 1px rgb(var(--holo-line) / 0.12);
}
.scouttag-stage img.scouttag-bg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0.55; pointer-events: none;
}
.scouttag-marker {
  position: absolute;
  width: 14px; height: 14px;
  translate: -50% -100%;
  pointer-events: none;
  filter: drop-shadow(0 0 5px rgba(53, 181, 255, 0.8));
}
.scouttag-open {
  position: absolute;
  right: 12px; bottom: 12px;
  z-index: 30;
}
.scouttag-profile {
  position: absolute;
  top: 10px; right: 12px;
  z-index: 30;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: 999px;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: #cfe3ff;
  background: rgba(6, 10, 20, 0.85);
  border: 1px solid rgba(53, 181, 255, 0.3);
}
.scouttag-profile b { color: #f5d142; font-variant-numeric: tabular-nums; }