/* 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; }

/* ── 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; }

/* ── Measuring ───────────────────────────────────────────────────────────────────────
   The plan goes grey while measuring — but NOT with a CSS filter on the live
   image. That blanked the plan and made every pan crawl (owner, 16 Sep 2026):
   the markup tool bakes a grey copy instead (IDZ.setGreyscale), which is what
   its own Greyscale button does. Only the pin layer's stacking lives here. */
body.gx-measuring .idz-pin-layer { z-index: 9; }