/* measurements.css — Fire Strategy mode
   Measurement-request chips under a Guidex reply, and the sticky note that
   follows the engineer into the markup tool. Amber = outstanding, green =
   measured; the pairing is never colour-only — an outstanding chip reads as a
   bare label, a measured one carries a ✓ and the value itself.

   Colours come from the --gxr-* block in report-assistant.css, which is
   declared on BOTH :root and .gx-report-screen. That matters here: the sticky
   note, the confirm button and the pin layer are appended into .idz-overlay,
   a body child that is NOT inside the report screen, so a token scoped to the
   screen alone would silently resolve to its fallback. */

.gx-measure-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px dashed var(--gxr-border, #e5e7eb);
}
.gx-measure-strip-title {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--gxr-muted, #6b7280);
}
.gx-measure-chip {
  font: 600 11.5px Inter, sans-serif;
  padding: 5px 11px;
  border-radius: 999px;
  cursor: pointer;
  transition: background .12s, border-color .12s, transform .08s;
  text-align: left;
}
.gx-measure-chip:active { transform: translateY(1px); }

/* Amber must never drift toward the green, or the two states collapse into
   each other in greyscale and for a red-green colour-blind reader. */
.gx-measure-chip.is-pending {
  background: var(--gxr-amber-bg, #fff7df);
  border: 1px solid var(--gxr-amber-border, #e5ca7e);
  color: var(--gxr-amber, #7b5b0c);
}
.gx-measure-chip.is-pending::before { content: '↔  '; }
.gx-measure-chip.is-pending:hover {
  background: #fae7bd;
  border-color: #c1922f;
}
.gx-measure-chip.is-done {
  background: var(--gxr-tint, rgba(99,199,106,.10));
  border: 1px solid var(--gxr-accent, #2f9c58);
  color: var(--gxr-accent-ink, #2f9c58);
}
.gx-measure-chip.is-done::before { content: '✓  '; }
.gx-measure-chip.is-done:hover {
  background: rgba(99,199,106,.20);
  border-color: var(--gxr-accent-deep, #257844);
}

/* ── sticky note, pinned inside the markup overlay ────────────────────────
   Sits clear of the top banner and the left sidebar. Fixed so it survives the
   overlay's own scrolling — the whole point is that the reason for being here
   stays visible while the engineer works in a different tool. */
.gx-measure-note {
  position: fixed;
  left: 18px;
  top: 74px;
  z-index: 8950;
  width: 300px;
  background: var(--gxr-amber-bg, #fff7df);
  border: 1px solid var(--gxr-amber-border, #e5ca7e);
  border-left: 4px solid var(--gxr-amber-border, #e5ca7e);
  border-radius: 10px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .28);
  padding: 12px 14px 13px;
  font-family: Inter, sans-serif;
  color: var(--gxr-caveat-ink, #4a3a12);
}
.gx-measure-note-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--gxr-amber, #7b5b0c);
}
.gx-measure-note-x {
  border: 0;
  background: transparent;
  color: var(--gxr-amber, #7b5b0c);
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
  padding: 0 2px;
}
.gx-measure-note-x:hover { color: #5c460f; }
.gx-measure-note h4 { font-size: 14px; margin: 7px 0 4px; line-height: 1.35; }
.gx-measure-note p { margin: 0 0 4px; font-size: 12px; color: var(--gxr-amber, #7b5b0c); }
.gx-measure-note-route { font-weight: 600; }
.gx-measure-note-why { font-size: 11.5px; color: var(--gxr-amber, #7b5b0c); font-style: italic; }

/* The taken value, shown large. Green because it is the answer, not a warning. */
.gx-measure-note-value {
  margin: 10px 0 9px;
  padding: 9px 11px;
  border-radius: 7px;
  background: var(--gxr-accent, #2f9c58);
  color: #fff;
  font: 700 17px 'JetBrains Mono', monospace;
  text-align: center;
}
/* Before a measurement exists this box holds an instruction sentence, so it
   has to drop the mono face, the size, the centring AND both colours. */
.gx-measure-note-value.is-empty {
  background: var(--gxr-surface-2, #f2f4f3);
  color: var(--gxr-muted, #6b7280);
  font: 500 11.5px Inter, sans-serif;
  text-align: left;
  line-height: 1.4;
}
.gx-measure-note-use {
  width: 100%;
  border: 0;
  border-radius: 7px;
  background: var(--gxr-ink, #1a1d20);
  color: #fff;
  padding: 10px;
  font: 600 12.5px Inter, sans-serif;
  cursor: pointer;
}
.gx-measure-note-use:hover:not(:disabled) { background: var(--gxr-accent, #2f9c58); }
.gx-measure-note-use:disabled {
  background: var(--gxr-border-strong, #d1d5db);
  cursor: not-allowed;
}
.gx-measure-note small {
  display: block;
  margin-top: 8px;
  font-size: 10.5px;
  color: var(--gxr-muted-2, #9ca3af);
  text-align: center;
}

@media (max-width: 700px) {
  .gx-measure-note { left: 10px; right: 10px; top: 62px; width: auto; }
}

/* ── scratch session: the building-review rail is noise here ────────────────
   That sidebar is for reviewing a building, not for taking one measurement.
   Hiding it gives the plan the width AND frees the left edge for the sticky
   note, so the reason for being here sits where the eye already goes. */
body.gx-report-scratch-plan .idz-leftbar { display: none !important; }

/* ── plan pins over the markup view ─────────────────────────────────────────
   Reference only: the plan-builder's pins and their connections painted over
   the plan so the engineer can see what they are measuring between. Not
   editable, never saved. Positioned in percentages, which stay true at any
   zoom because the overlay resizes the plan rather than CSS-scaling it.

   The pin blue and the target yellow are NOT brand colours and do not follow
   the green: they have to stay legible over an arbitrary printed plan. */
.gx-sp-layer { position: absolute; inset: 0; pointer-events: none; z-index: 4; }
.gx-sp-links { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.gx-sp-link {
  stroke: #2f6f8f;
  stroke-width: .35;
  stroke-dasharray: 1.4 1.1;
  opacity: .75;
  vector-effect: non-scaling-stroke;
}
.gx-sp-pin {
  position: absolute;
  width: 13px; height: 13px;
  margin: -6.5px 0 0 -6.5px;
  border-radius: 50%;
  background: var(--pin, var(--gxr-muted, #6b7280));
  border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .45);
}
.gx-sp-pin.is-target {
  width: 19px; height: 19px;
  margin: -9.5px 0 0 -9.5px;
  border-color: var(--gxr-target, #ffd34d);
  box-shadow: 0 0 0 4px rgba(255, 211, 77, .45), 0 1px 6px rgba(0, 0, 0, .5);
}
.gx-sp-tag {
  position: absolute;
  left: 50%; top: -7px;
  transform: translate(-50%, -100%);
  white-space: nowrap;
  font: 600 10px Inter, sans-serif;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(255, 255, 255, .93);
  color: var(--gxr-ink, #1a1d20);
  border: 1px solid rgba(0, 0, 0, .18);
}
.gx-sp-tag.is-target { background: #ffd34d; border-color: #b58c00; color: #3a2f00; }

/* ── confirm, in place of PDF Export ────────────────────────────────────────
   A scratch session has nothing to export, so that slot becomes the way out:
   confirm the value and land back on the interview that asked for it. The
   export button is only HIDDEN, so an ordinary Markup session still has it. */
body.gx-report-scratch-plan #idzPdfExport { display: none !important; }
.gx-measure-confirm-top {
  border: 0;
  border-radius: 7px;
  background: var(--gxr-ink, #1a1d20);
  color: #fff;
  padding: 8px 15px;
  margin-right: 10px;
  font: 600 12px Inter, sans-serif;
  cursor: pointer;
  white-space: nowrap;
}
.gx-measure-confirm-top:hover:not(:disabled) { background: var(--gxr-accent, #2f9c58); }
.gx-measure-confirm-top:disabled {
  background: var(--gxr-border-strong, #d1d5db);
  opacity: .55;
  cursor: not-allowed;
}

/* One measurement answers one request: the first drawn is the input, a later
   line is flagged rather than swapped in, and discarding is deliberate. */
.gx-measure-note-warn {
  margin: 0 0 9px !important;
  padding: 7px 9px;
  border-radius: 6px;
  background: #fde9c8;
  border: 1px solid var(--gxr-amber-border, #e5ca7e);
  font-size: 11px !important;
  line-height: 1.4;
  color: var(--gxr-amber, #7b5b0c) !important;
}
.gx-measure-note-redo {
  width: 100%;
  margin-top: 7px;
  border: 1px solid var(--gxr-amber-border, #e5ca7e);
  border-radius: 7px;
  background: transparent;
  color: var(--gxr-amber, #7b5b0c);
  padding: 8px;
  font: 600 11.5px Inter, sans-serif;
  cursor: pointer;
}
.gx-measure-note-redo:hover { background: #f3ead6; }
.gx-measure-note-redo[hidden] { display: none; }
.gx-measure-note-warn[hidden] { display: none; }