/* markups-window.css — every drawing in the project, in one window.
   Its colours are the report's own tokens, so it belongs to the same app. */

.gx-markups {
  position: fixed;
  inset: 0;
  /* Above the report (8800) and above the markup screen's own layers, because
     it opens OVER whatever screen the engineer was on. */
  z-index: 8830;
  display: flex;
  flex-direction: column;
  background: var(--gxr-canvas, #fafbfc);
  color: var(--gxr-ink, #1a1d20);
  font-family: var(--gxr-font, inherit);
  overflow: hidden;
}
.gx-markups[hidden] { display: none; }

.gx-markups-head {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 14px;
  padding: 16px 22px;
  border-bottom: 1px solid var(--gxr-border, #e5e7eb);
  background: var(--gxr-surface, #fff);
}
.gx-markups-head > div:nth-child(2) { flex: 1 1 auto; min-width: 0; }
.gx-markups-head span {
  font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--gxr-muted, #6b7280); font-weight: 600;
}
.gx-markups-head h1 { margin: 2px 0 0; font-size: 18px; }
.gx-markups-back {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 9px;
  border: 1px solid var(--gxr-border, #e5e7eb); background: var(--gxr-surface, #fff);
  color: var(--gxr-ink, #1a1d20); font-size: 16px; cursor: pointer;
}
.gx-markups-back:hover { background: var(--gxr-surface-2, #f2f4f3); }
.gx-markups-actions { flex: 0 0 auto; }
.gx-markups-actions button {
  border: 1px solid var(--gxr-border-strong, #d1d5db); background: var(--gxr-surface, #fff);
  color: var(--gxr-ink, #1a1d20); border-radius: 10px; padding: 9px 14px;
  font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer;
}
.gx-markups-actions button:hover { background: var(--gxr-surface-2, #f2f4f3); }
.gx-markups-actions button:disabled { opacity: .55; cursor: progress; }

.gx-markups-body { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 22px; }
.gx-markups-body > section { margin: 0 0 28px; }
.gx-markups-body > section > header h2 { margin: 0; font-size: 15px; }
.gx-markups-body > section > header p {
  margin: 2px 0 12px; font-size: 12.5px; line-height: 1.45; color: var(--gxr-muted, #6b7280);
}
.gx-markups-empty { color: var(--gxr-muted, #6b7280); font-size: 13px; }

.gx-markups-grid {
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}
.gx-markups-card {
  display: flex; flex-direction: column; gap: 6px;
  padding: 12px; border: 1px solid var(--gxr-border, #e5e7eb); border-radius: 12px;
  background: var(--gxr-surface, #fff);
}
.gx-markups-card strong { font-size: 13.5px; line-height: 1.35; word-break: break-word; }
.gx-markups-meta { font-size: 12px; color: var(--gxr-muted, #6b7280); }
.gx-markups-shot {
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 4 / 3; overflow: hidden; border-radius: 8px;
  background: var(--gxr-surface-2, #f2f4f3);
  border: 1px solid var(--gxr-border, #e5e7eb);
}
.gx-markups-shot canvas, .gx-markups-shot img {
  max-width: 100%; max-height: 100%; display: block;
}
/* The picture opens the markup tool, as the button under it does. */
.gx-markups-shot[role="button"] { cursor: pointer; }
.gx-markups-shot:focus-visible { outline: 2px solid var(--gxr-accent, #2f9c58); outline-offset: 2px; }
.gx-markups-shot.is-empty {
  font-size: 12px; color: var(--gxr-muted, #6b7280); text-align: center; padding: 10px;
}
.gx-markups-tools { display: flex; gap: 8px; margin-top: 4px; }
.gx-markups-tools button {
  flex: 1 1 auto;
  border: 1px solid var(--gxr-border-strong, #d1d5db); background: var(--gxr-surface, #fff);
  color: var(--gxr-ink, #1a1d20); border-radius: 9px; padding: 8px 10px;
  font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer;
}
.gx-markups-tools button:hover { background: var(--gxr-surface-2, #f2f4f3); }
.gx-markups-tools button.is-quiet { font-weight: 500; color: var(--gxr-muted, #6b7280); }
.gx-markups-tools button:disabled { opacity: .45; cursor: not-allowed; }

/* A toast sits at 2200 on the project list (8850 only while the report is
   up), so every message this window gives there — "Could not download that
   one", "Could not read this project's drawings" — landed UNDER it and was
   never seen (owner, 17 Sep 2026). Same height as over the report. */
body.gx-markups-open #toast { z-index: 8850; }

/* ── The markup tool, opened from this window ───────────────────────────────
   The tool's overlay sits at 4000 and the report screen at 8800, so "Mark it
   up" opened the tool UNDERNEATH the report: this window closed, the report
   came back, and to the engineer nothing had happened (owner, 17 Sep 2026).
   The report lifts the overlay for its own two paths, scratch measuring and
   plan editing, and neither is on here — so this window lifts it for its own.
   The overlay is opaque, so nothing shows through it. */
body.gx-markups-marking .idz-overlay,
body.gx-markups-marking .idz-export,
body.gx-markups-marking .bb-modal-back {
  /* !important beats an inline z-index, as the report's own rule does. */
  z-index: 8900 !important;
}
/* The tool hangs its menus on <body> at 5000–6000, just over its own 4000.
   Lifted with it, or a right-click opens a menu nobody can see. */
body.gx-markups-marking .idz-vmenu,
body.gx-markups-marking .bb-ctx,
body.gx-markups-marking .gx-img-grip { z-index: 8960 !important; }
/* A toast is at 2200 (8850 over the report) — under the lifted tool. "Your
   markup is as you left it" is said as the tool opens, so it must be read. */
body.gx-markups-marking #toast { z-index: 8970 !important; }

/* The icon on a Fire Strategy card in the project list. */
.gx-markups-chip {
  border: 1px solid var(--border, #e5e7eb); background: var(--surface, #fff);
  color: var(--muted, #6b7280); border-radius: 8px; padding: 4px 8px;
  font: inherit; font-size: 11.5px; font-weight: 600; cursor: pointer; line-height: 1.3;
}
.gx-markups-chip:hover { background: var(--sidebar, #f2f4f3); color: var(--ink, #1a1d20); }

@media (max-width: 720px) {
  .gx-markups-head { padding: 12px 14px; }
  .gx-markups-body { padding: 14px; }
}