/* report-assistant.css — Fire Strategy mode
   Restyled 30 Aug 2026 to the Stitch "Aetheric Minimalist" design, driven by
   the APP’S OWN brand tokens rather than the design’s palette: the layout,
   geometry and type come from Stitch, every colour comes from css/guide-x.css
   through the --gxr-* block below. Stitch’s primary-container is #63c76a,
   which is already --flame, so the two agree on the green.

   A handful of rules are written MINIFIED on purpose. backend/scripts/
   test-report-assistant.js matches them as exact substrings or regexes —
   the z-index rules, the two .gx-report-toc{display:none} lines, the composer
   max-height, and the caveat highlight. Reformatting them breaks the suite. */

/* ══ Token block (declare first, above every other rule) ══ */
:root,
.gx-report-screen {
  /* Surfaces — Stitch's white-chrome / grey-canvas inversion, app hues. */
  --gxr-canvas:        var(--bg, #fafbfc);
  --gxr-surface:       var(--surface, #ffffff);
  --gxr-surface-2:     var(--sidebar, #f2f4f3);
  --gxr-track:         var(--sidebar-soft, #e8ebe9);
  --gxr-hover:         var(--hover, #edf0ee);
  --gxr-bubble-user:   #f1f0ee; /* literal match to .message.user > .bubble */

  /* Type */
  --gxr-ink:           var(--ink, #1a1d20);
  --gxr-ink-soft:      var(--ink-soft, #374151);
  --gxr-muted:         var(--muted, #6b7280);
  --gxr-muted-2:       var(--muted-2, #9ca3af);

  /* Lines */
  --gxr-border:        var(--border, #e5e7eb);
  --gxr-border-strong: var(--border-strong, #d1d5db);

  /* Green — three roles, three names, never interchanged. */
  --gxr-accent:        var(--green, #2f9c58);       /* fills and strokes */
  --gxr-accent-deep:   var(--green-deep, #257844);  /* pressed */
  --gxr-accent-ink:    var(--flame-deep, #2f9c58);  /* type on tint */
  --gxr-brand:         var(--flame, #63c76a);       /* marks, dots, key pill */
  --gxr-brand-ink:     var(--ink, #1a1d20);         /* type on --gxr-brand */
  --gxr-tint:          var(--flame-soft, rgba(99,199,106,.10));
  --gxr-focus:         var(--flame-tint, rgba(99,199,106,.09));

  /* Semantics — deliberately NOT green. */
  --gxr-amber:         #7b5b0c;
  --gxr-amber-bg:      #fff7df;
  --gxr-amber-border:  #e5ca7e;
  --gxr-danger:        var(--red, #d44d4d);
  --gxr-caveat-bg:     #fff5d6;
  --gxr-caveat-ring:   #f0dca8;
  --gxr-caveat-ink:    #4a3a12;
  --gxr-scratch-banner:#7a4b00;
  --gxr-target:        #ffd34d;

  /* Depth */
  --gxr-shadow-sm:     0 1px 2px rgba(26,29,32,.05);
  --gxr-shadow-card:   var(--shadow-soft, 0 1px 2px rgba(40,30,14,.04), 0 8px 24px rgba(40,30,14,.06));

  /* Geometry — Stitch's ladder. */
  --gxr-r-card:  16px;
  --gxr-r-ctl:   12px;
  --gxr-r-btn:   var(--r-sm, 6px);
  --gxr-r-chip:  4px;
  --gxr-r-pill:  var(--r-pill, 999px);

  /* Layout numbers that were duplicated as literals. */
  --gxr-rail-w:      64px;
  --gxr-toc-w:       230px;
  --gxr-header-h:    64px;
  --gxr-main-pad-y:  24px;

  /* Type families */
  --gxr-font:         var(--font, 'Inter', system-ui, sans-serif);
  --gxr-font-display: 'Rethink Sans', var(--font, 'Inter'), sans-serif;
  --gxr-font-mono:    var(--font-mono, 'JetBrains Mono', ui-monospace, monospace);
}

.gx-report-screen {
  position: fixed;
  inset: 0;
  z-index: 8800;
  background: var(--gxr-canvas);
  color: var(--gxr-ink);
  display: flex;
  flex-direction: column;
  font-family: var(--gxr-font);
}
.gx-report-screen[hidden] { display: none; }

/* ══ Top bar — the Stitch white nav with breadcrumb ══ */
.gx-report-header {
  height: var(--gxr-header-h);
  flex: 0 0 var(--gxr-header-h);
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 16px;
  background: var(--gxr-surface);
  color: var(--gxr-ink);
  border-bottom: 1px solid var(--gxr-border);
}

.gx-report-back {
  border: 0;
  background: transparent;
  color: var(--gxr-muted);
  font-size: 20px;
  line-height: 1;
  padding: 6px 8px;
  border-radius: var(--gxr-r-btn);
  cursor: pointer;
  transition: color .2s, transform .2s;
}
.gx-report-back:hover { color: var(--gxr-ink); transform: scale(1.05); }
.gx-report-back:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--gxr-focus);
}

.gx-report-crumbs {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
}

.gx-report-brand {
  font-family: var(--gxr-font-display);
  font-weight: 500;
  letter-spacing: -.01em;
  color: var(--gxr-ink);
  white-space: nowrap;
}
.gx-report-brand .gx-lockup-sym {
  font-family: var(--gxr-font-mono);
  font-weight: 700;
  color: var(--gxr-brand);
  margin-right: 6px;
}

.gx-report-crumb-sep {
  color: var(--gxr-muted);
  padding: 0 4px;
}

/* Was a translucent pill on dark green; now the Stitch breadcrumb tail.
   render() writes 'Draft' | 'Interview · B1' | 'Not started' here. */
.gx-report-status {
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  color: var(--gxr-muted);
  background: var(--gxr-track);
  border: 1px solid var(--gxr-border);
  border-radius: var(--gxr-r-chip);
  padding: 2px 8px;
  white-space: nowrap;
}

.gx-report-save-state {
  font-size: 12px;
  color: var(--gxr-muted);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Error is no longer colour-only. */
.gx-report-save-state.gx-report-error {
  color: var(--gxr-danger);
  font-weight: 600;
}
.gx-report-save-state.gx-report-error::before {
  content: '! ';
  font-weight: 700;
}

/* ══ Header action buttons + shared button base ══ */
/* This shared base used to assume a dark bar. It is now a light outline
   button, which is what Stitch uses for all three header actions. */
.gx-report-back,
.gx-report-actions button,
.gx-report-toolbar button,
.gx-report-revisions-head button {
  font: 500 14px/20px var(--gxr-font);
  border: 1px solid var(--gxr-border);
  background: var(--gxr-surface);
  color: var(--gxr-muted);
  border-radius: var(--gxr-r-btn);
  padding: 6px 12px;
  cursor: pointer;
  transition: background .2s, color .2s, border-color .2s, transform .2s;
}
.gx-report-back { font-size: 20px; border: 0; background: transparent; padding: 6px 8px; }

.gx-report-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  /* A cramped header (gf-source-open / gf-plan-pane-open shrink
     #gxReportScreen without the viewport itself changing, so the
     max-width:900 rule below never fires) used to force these buttons to
     wrap their own text onto 2-3 lines, which grew past the 64px header
     and read as broken chrome, with the save-state text landing on top of
     the brand. Buttons now stay one line each and this row scrolls itself
     if it still does not fit (rule 4, owner, 17 Sep 2026). */
  overflow-x: auto;
  scrollbar-width: none;
}
.gx-report-actions::-webkit-scrollbar { display: none; }
.gx-report-actions button {
  white-space: nowrap;
  flex: 0 0 auto;
}
.gx-report-actions button:hover:not(:disabled) {
  background: var(--gxr-hover);
  color: var(--gxr-ink);
  transform: translateY(-2px);
}
.gx-report-actions button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--gxr-focus);
}
/* Positional emphasis preserved. Stitch differentiates its last action by
   text colour only, not a fill, so the app's ink-at-rest primary convention
   is not contradicted here. Reordering these four buttons moves this. */
.gx-report-actions button:last-child {
  background: var(--gxr-surface);
  color: var(--gxr-ink);
  font-weight: 600;
}
.gx-report-actions button:disabled {
  opacity: .45;
  cursor: not-allowed;
  transform: none;
}
.gx-report-actions button[hidden] { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  .gx-report-back,
  .gx-report-actions button { transition: none; }
  .gx-report-back:hover,
  .gx-report-actions button:hover:not(:disabled) { transform: none; }
}

/* ══ Shell grid — dual-width rail ══ */
.gx-report-shell {
  min-height: 0;
  flex: 1;
  display: grid;
  grid-template-columns: var(--gxr-toc-w) minmax(500px, 1fr);
  overflow: hidden;
}

/* Editor / empty modes keep the wide Contents rail (the base above).
   Interview and progress-preview modes fill #gxReportToc with
   .gx-report-section-step, which is the Stitch 64px B1-B5 rail.
   Specificity is (0,2,0) ON PURPOSE: it must lose to the pane-open rule
   (0,3,1) and to the revisions :has() rule (0,3,0). Never put an id
   inside this :has(). */
.gx-report-shell:has(.gx-report-section-step) {
  grid-template-columns: var(--gxr-rail-w) minmax(0, 1fr);
}

/* Unchanged: third column for Versions, editor mode only. */
.gx-report-shell:has(.gx-report-revisions:not([hidden])) {
  grid-template-columns: var(--gxr-toc-w) minmax(500px, 1fr) 300px;
}

@media (max-width: 900px) {
  /* Raised from (0,1,0) to (0,3,0) so it finally beats the :has() rules.
     This fixes the latent bug where a narrow viewport with Versions open
     squeezed .gx-report-main into the 230px column. */
  .gx-report-screen .gx-report-shell.gx-report-shell {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ══ Left rail — 64px B1-B5 pills, 230px Contents list ══ */
.gx-report-toc {
  padding: 28px 18px;
  border-right: 1px solid var(--gxr-border);
  background: var(--gxr-surface);
  overflow: auto;
}

.gx-report-toc-title {
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: .12em;
  font-weight: 600;
  color: var(--gxr-muted);
  margin-bottom: 14px;
}

/* Editor-mode Contents links (classless <a>, reachable only this way). */
.gx-report-toc a {
  display: block;
  color: var(--gxr-ink-soft);
  text-decoration: none;
  font-size: 13px;
  line-height: 1.35;
  padding: 7px 8px;
  border-radius: var(--gxr-r-btn);
  border-left: 2px solid transparent;
  transition: background .15s, color .15s, border-color .15s;
}
.gx-report-toc a:hover {
  color: var(--gxr-accent-ink);
  background: var(--gxr-hover);
  border-color: var(--gxr-accent);
}
.gx-report-toc a:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--gxr-focus); }

/* ── Rail mode ───────────────────────────────────────────────────────────
   Same element, same classes, same JS. Triggered by the presence of the
   step buttons the interview and preview builders already emit. */
.gx-report-toc:has(.gx-report-section-step) {
  padding: 16px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
}
/* The label node must stay in the document — three unguarded
   querySelector('.gx-report-toc-title').textContent writes depend on it.
   Visually hidden, still announced. */
.gx-report-toc:has(.gx-report-section-step) .gx-report-toc-title {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.gx-report-toc:has(.gx-report-section-step) #gxReportToc {
  flex: 1;
  min-height: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  overflow: auto;
}

/* The pill. Styled to work as BOTH a <button> and a <div>, because
   renderProgressPreview emits a div for ungenerated sections. */
.gx-report-toc:has(.gx-report-section-step) .gx-report-section-step {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  padding: 0;
  border: 0;
  border-left: 2px solid transparent;
  border-radius: var(--gxr-r-ctl);
  background: transparent;
  color: var(--gxr-muted);
  font: 700 15px/1 var(--gxr-font);
  text-align: center;
  cursor: pointer;
  transition: background .2s, color .2s, border-color .2s;
}
.gx-report-toc:has(.gx-report-section-step) .gx-report-section-step:hover:not(:disabled) {
  background: var(--gxr-hover);
  color: var(--gxr-ink);
}
.gx-report-toc:has(.gx-report-section-step) .gx-report-section-step.is-active {
  background: var(--gxr-tint);
  color: var(--gxr-accent-ink);
  border-left-color: var(--gxr-accent);
}
.gx-report-toc:has(.gx-report-section-step) .gx-report-section-step.is-complete {
  color: var(--gxr-accent-ink);
}
.gx-report-toc:has(.gx-report-section-step) .gx-report-section-step:disabled {
  opacity: .45;
  cursor: not-allowed;
}
.gx-report-toc:has(.gx-report-section-step) .gx-report-section-step:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--gxr-focus);
}
/* Status glyph survives as a corner badge, so state is never colour-only.
   Stitch's permanent softPulse on the active pill is deliberately NOT
   reproduced: a never-settling 'you are here' marker is a distraction and
   the app honours prefers-reduced-motion in three other places. */
.gx-report-toc:has(.gx-report-section-step) .gx-report-section-step[data-mark]:not([data-mark='']) ::after,
.gx-report-toc:has(.gx-report-section-step) .gx-report-section-step[data-mark]:not([data-mark=''])::after {
  content: attr(data-mark);
  position: absolute;
  right: 2px;
  bottom: 1px;
  font-size: 10px;
  line-height: 1;
  font-weight: 700;
  color: var(--gxr-accent);
}

/* ══ Interview head — white second chrome row, Stitch layout, no DOM move ══ */
/* Was a dark green banner with a 13px top radius. Now the second half of the
   Stitch top nav: white, hairline underline, no radius, no fill.
   Its four existing children are reflowed by grid — nothing is moved in the
   DOM, so `>div:first-child>span` still renders the key pill and the
   view-tools stay inside the element the test suite slices for. */
.gx-report-interview-head {
  padding: 12px 24px;
  background: var(--gxr-surface);
  color: var(--gxr-ink);
  border-bottom: 1px solid var(--gxr-border);
  border-radius: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 16px;
  row-gap: 8px;
}
.gx-report-interview-head > div:first-child {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
/* The B1 key pill — the ONLY selector that renders it. */
.gx-report-interview-head > div:first-child > span {
  font: 700 12px/16px var(--gxr-font);
  color: var(--gxr-brand-ink);
  background: var(--gxr-brand);
  border: 1px solid var(--gxr-brand);
  border-radius: var(--gxr-r-chip);
  padding: 2px 8px;
  flex: 0 0 auto;
}
.gx-report-interview-head h1 {
  font-family: var(--gxr-font-display);
  font-weight: 700;
  font-size: 16px;
  line-height: 24px;
  margin: 0;
  color: var(--gxr-ink);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.gx-report-interview-head p {
  grid-column: 1 / -1;
  grid-row: 2;
  color: var(--gxr-muted);
  font-size: 13px;
  line-height: 1.5;
  margin: 0;
}
.gx-report-interview-head p:empty { display: none; }
.gx-report-context-chips {
  grid-column: 1 / -1;
  grid-row: 3;
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
}

@media (max-width: 700px) {
  .gx-report-interview-head {
    padding: 12px 16px;
    grid-template-columns: minmax(0, 1fr);
  }
  .gx-report-interview-head > div:first-child { align-items: center; }
}

/* ══ Plan / Guidance / Measure — Stitch segmented control ══ */
/* Sits in column 2, row 1 of the interview head grid — i.e. on the same
   line as the B1 pill and the section title, which is where Stitch puts it. */
.gx-report-view-tools {
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin-top: 0;
  padding: 2px;
  background: var(--gxr-track);
  border: 1px solid var(--gxr-border);
  border-radius: 8px;
  flex-wrap: nowrap;
}
.gx-report-view-tools button {
  /* 1px transparent border on the inactive segments too, so the active one
     does not sit a pixel lower than its neighbours — a real defect in the
     Stitch source, fixed here rather than reproduced. */
  border: 1px solid transparent;
  background: transparent;
  color: var(--gxr-muted);
  border-radius: var(--gxr-r-btn);
  padding: 4px 12px;
  font: 500 12px/16px var(--gxr-font);
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s, color .15s, border-color .15s;
}
.gx-report-view-tools button:hover:not(:disabled) {
  color: var(--gxr-ink);
}
/* Stitch's active segment is a raised white card, not a coloured one. */
.gx-report-view-tools button.is-active {
  background: var(--gxr-surface);
  border-color: var(--gxr-border);
  color: var(--gxr-ink);
  box-shadow: var(--gxr-shadow-sm);
}
.gx-report-view-tools button:disabled { opacity: .4; cursor: not-allowed; }
.gx-report-view-tools button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--gxr-focus);
}

@media (max-width: 700px) {
  .gx-report-view-tools { grid-column: 1; grid-row: 4; justify-self: start; }
}

/* Guidance chips — Stitch's inline pin chip: squarer than a pill so an
   inline reference never reads as a status chip. Both the empty-state
   <span> and the interactive <button> are classless. */
.gx-report-context-chips span,
.gx-report-context-chips button {
  font: 500 12px/16px var(--gxr-font);
  padding: 3px 8px;
  border-radius: var(--gxr-r-chip);
  background: var(--gxr-track);
  border: 1px solid var(--gxr-border);
  color: var(--gxr-muted);
}
.gx-report-context-chips button {
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
.gx-report-context-chips button:hover {
  background: var(--gxr-hover);
  border-color: var(--gxr-border-strong);
  color: var(--gxr-ink);
}
.gx-report-context-chips button.is-active {
  background: var(--gxr-tint);
  border-color: var(--gxr-accent);
  color: var(--gxr-accent-ink);
  font-weight: 600;
}
.gx-report-context-chips button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--gxr-focus);
}

/* ══ Main column, chat transcript and message bubbles ══ */
.gx-report-main {
  min-width: 0;
  overflow: auto;
  padding: var(--gxr-main-pad-y) 32px 64px;
  background: var(--gxr-canvas);
}

.gx-report-main.is-interviewing { padding: 0; overflow: hidden; }
.gx-report-main.is-interviewing .gx-report-interview {
  width: 100%; max-width: none; height: 100%; margin: 0;
  display: flex; flex-direction: column;
}
.gx-report-main.is-interviewing .gx-report-interview-head { flex: 0 0 auto; }
.gx-report-main.is-interviewing .gx-report-chat {
  flex: 1; min-height: 0; display: flex; flex-direction: column;
  background: var(--gxr-canvas); border: 0; padding: 0;
}
.gx-report-main.is-interviewing .gx-report-chat[hidden],
.gx-report-main.is-interviewing .gx-report-intake[hidden] { display: none; }
.gx-report-main.is-interviewing .gx-report-intake {
  flex: 1; overflow: auto; border: 0; background: var(--gxr-canvas);
  padding: 24px max(24px, 6vw);
}
/* Same rhythm as the project chat's message column and composer. */
.gx-report-main.is-interviewing .gx-report-messages {
  flex: 1; min-height: 160px; height: auto;
  padding: 32px 32px 16px 40px; scrollbar-gutter: stable;
}
.gx-report-main.is-interviewing .gx-report-composer {
  flex: 0 0 auto; padding: 14px 32px 12px 40px;
}
.gx-report-main.is-interviewing .gx-report-section-loading { flex: 1; min-height: 0; }

.gx-report-messages {
  height: min(48vh, 520px);
  overflow: auto;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.gx-report-messages::-webkit-scrollbar { width: 6px; }
.gx-report-messages::-webkit-scrollbar-track { background: transparent; }
.gx-report-messages::-webkit-scrollbar-thumb {
  background: var(--gxr-border-strong);
  border-radius: 999px;
}

/* ══ Chat rows — the project chat's own look ══
   The rows are built with the project chat's markup (.message.user /
   .message.assistant, .gx-mark, .bubble — see report-assistant.js), so
   css/guide-x-adapter.css already draws them exactly as the chat does: both
   on the left, the >_ mark leading each reply, the user's grey card, the
   typing reveal, and the gx-loader for "thinking". Only what is specific to
   this screen lives here. */
.gx-report-messages .message.assistant > .bubble { max-width: 760px; }
.gx-report-messages .message.user > .bubble { max-width: min(80%, 680px); }
/* Rows already on screen do not replay their entrance each time the list is
   rebuilt; only a reply that arrives while the engineer watches animates. */
.gx-report-messages .message.gx-settled,
.gx-report-messages .message.gx-settled > .bubble > *,
.gx-report-messages .message.gx-settled > .bubble > *::after { animation: none; }
.gx-report-messages .message.is-pending > .bubble { opacity: .92; }
/* Measurement chips and tables sit inside the reply, so they must not pick
   up the per-block typing caret. */
.gx-report-messages .message.assistant > .bubble > .gx-measure-strip::after,
.gx-report-messages .message.assistant > .bubble > table::after { display: none; }
.gx-report-messages .message.assistant > .bubble table {
  border-collapse: collapse; margin: 12px 0; font-size: 12.5px;
  display: block; overflow-x: auto;
}
.gx-report-messages .message.assistant > .bubble th,
.gx-report-messages .message.assistant > .bubble td {
  border: 1px solid var(--gxr-border); padding: 6px 9px; text-align: left; vertical-align: top;
}
.gx-report-messages .message.assistant > .bubble th { background: var(--gxr-surface-2); font-weight: 600; }

/* ══ Parameter chips, intake form, composer ══ */
.gx-report-parameter-strip {
  display: flex; gap: 8px; flex-wrap: wrap;
  border-bottom: 1px solid var(--gxr-border);
  padding: 16px 24px;
  background: var(--gxr-canvas);
  flex: 0 0 auto;
}
/* The is-<status> suffix is interpolated from server data; only these two
   have styles and every other status falls through to the base chip. */
.gx-report-param {
  display: inline-flex; align-items: center; gap: 4px;
  font: 500 12px/16px var(--gxr-font);
  border: 1px solid var(--gxr-border);
  border-radius: var(--gxr-r-pill);
  padding: 6px 12px;
  background: var(--gxr-surface);
  color: var(--gxr-muted);
}
/* The glyph is the primary signal and the colour is second, exactly as the
   measurement chips do it. A reader who cannot separate the green from the
   amber still reads a tick against a question mark. */
.gx-report-param.is-confirmed::before { content: '✓'; font-weight: 700; }
.gx-report-param.is-unclear::before   { content: '?'; font-weight: 700; }
.gx-report-param.is-confirmed {
  background: var(--gxr-tint);
  border-color: var(--gxr-accent);
  color: var(--gxr-accent-ink);
}
.gx-report-param.is-unclear {
  background: var(--gxr-amber-bg);
  border-color: var(--gxr-amber-border);
  color: var(--gxr-amber);
}

.gx-report-intake h2 {
  font-family: var(--gxr-font-display);
  font-weight: 700; font-size: 20px; margin: 0 0 6px; color: var(--gxr-ink);
}
.gx-report-intake > p { color: var(--gxr-muted); }
.gx-report-intake form label { display: block; margin: 20px 0; }
.gx-report-intake form label strong,
.gx-report-intake form label span { display: block; }
.gx-report-intake form label strong { font-size: 14px; color: var(--gxr-ink); }
.gx-report-intake form label span {
  font-size: 12px; color: var(--gxr-muted); margin: 5px 0 8px;
}

/* The intake form's answer boxes. */
.gx-report-intake textarea {
  box-sizing: border-box;
  width: 100%;
  resize: vertical;
  border: 1px solid var(--gxr-border);
  border-radius: var(--gxr-r-card);
  background: var(--gxr-surface);
  box-shadow: var(--gxr-shadow-sm);
  padding: 11px 12px;
  font: 14px/1.45 var(--gxr-font);
  color: var(--gxr-ink);
  transition: border-color .2s, box-shadow .2s;
}
.gx-report-intake textarea::placeholder { color: var(--gxr-muted-2); }
.gx-report-intake textarea:focus {
  outline: none;
  border-color: var(--gxr-accent);
  box-shadow: 0 0 0 3px var(--gxr-focus);
}
/* MUST stay literally `.gx-report-composer textarea{max-height:200px` —
   test-report-assistant.js reads REPORT_COMPOSER_MAX_H out of the JS and
   asserts this substring. */
.gx-report-composer textarea{max-height:200px;overflow-y:auto}

/* The composer is the project chat's pill: .gf-chat-pill and .chat-input
   come styled from css/guide-x-adapter.css. It sits on the canvas with the
   chat's fade above it, not in a bordered footer. */
.gx-report-composer {
  position: relative;
  background: var(--gxr-canvas);
  padding: 14px 32px 12px 40px;
}
.gx-report-composer::before {
  content: ""; position: absolute; left: 0; right: 0; top: -24px; height: 24px;
  background: linear-gradient(to top, var(--gxr-canvas), rgba(250,251,252,0));
  pointer-events: none;
}
.gx-report-pill { grid-template-areas: "textarea send"; grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
.gx-report-pill .chat-input { grid-area: textarea; }
/* The chat's send button, redrawn under its own class: chat.js wires the
   first `.send-btn` in the page to the project chat. */
.gx-report-send {
  grid-area: send;
  width: 30px; height: 30px; border-radius: var(--r, 8px);
  background: var(--gxr-ink); border: 1px solid var(--gxr-ink); color: #fff;
  display: grid; place-items: center; cursor: pointer;
  transition: background 180ms var(--ease, ease), border-color 180ms var(--ease, ease), transform 120ms var(--ease, ease);
}
.gx-report-send svg { width: 13px; height: 13px; }
.gx-report-send:hover:not(:disabled) { background: var(--gxr-brand); border-color: var(--gxr-brand); }
.gx-report-send:active:not(:disabled) { transform: scale(.94); }
.gx-report-send:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--gxr-focus); }
.gx-report-send:disabled {
  background: var(--gxr-canvas); border-color: var(--gxr-border); color: var(--gxr-muted-2); cursor: not-allowed;
}
.gx-report-composer .gf-chat-disclaimer { margin-top: 8px; }

/* Primary buttons follow the APP convention — ink at rest, green on hover. */
.gx-report-intake form > button,
.gx-report-generate-btn,
.gx-report-empty button {
  border: 0;
  border-radius: var(--gxr-r-ctl);
  background: var(--gxr-ink);
  color: var(--gxr-surface);
  padding: 12px 17px;
  font: 600 13px var(--gxr-font);
  cursor: pointer;
  transition: background .15s, transform .15s;
}
.gx-report-intake form > button:hover:not(:disabled),
.gx-report-generate-btn:hover:not(:disabled),
.gx-report-empty button:hover:not(:disabled) {
  background: var(--gxr-accent);
}
.gx-report-intake form > button:active:not(:disabled),
.gx-report-generate-btn:active:not(:disabled),
.gx-report-empty button:active:not(:disabled) {
  background: var(--gxr-accent-deep);
  transform: translateY(1px);
}
.gx-report-intake form > button:focus-visible,
.gx-report-generate-btn:focus-visible,
.gx-report-empty button:focus-visible {
  outline: none; box-shadow: 0 0 0 3px var(--gxr-focus);
}
.gx-report-intake button:disabled,
.gx-report-generate-btn:disabled { opacity: .5; }

@media (max-width: 700px) {
  .gx-report-composer { padding: 12px 16px; }
}

/* ══ Hidden-attribute guards (includes a live bug fix) ══ */
/* Every mode swap in this screen is the plain `hidden` property, and there
   is no global [hidden] reset in any loaded stylesheet. Any element given a
   `display` value needs its own guard or it will never hide.
   .gx-report-composer{display:grid} currently defeats
   report-assistant.js:457 (`hidden = readOnly`), so the composer stays
   visible on a completed section. Fixed here. */
.gx-report-screen[hidden] { display: none; }
.gx-report-composer[hidden] { display: none; }
.gx-report-interview[hidden] { display: none; }
.gx-report-chat[hidden] { display: none; }
.gx-report-intake[hidden] { display: none; }
.gx-report-parameter-strip[hidden] { display: none; }
.gx-report-messages[hidden] { display: none; }
.gx-report-main.is-interviewing .gx-report-chat[hidden],
.gx-report-main.is-interviewing .gx-report-intake[hidden] { display: none; }
.gx-report-actions button[hidden] { display: none !important; }
.gx-report-toc:has(.gx-report-section-step) .gx-report-section-step[hidden] { display: none; }

/* ══ Ready-for-review card, empty and working cards, spinner ══ */
/* Ready for review is a green card BESIDE the chat, so the conversation keeps
   its whole height and Generate is always in sight (owner, 29 Sep 2026: "the
   setup right now feels very cluttered"). It used to sit between the chat and
   the message box, up to 44% of the height with a scroll of its own and
   Generate hidden at its foot: on a laptop the chat was left about five
   lines. With the plan or the guidance open, or no room beside the chat, it
   is a one-line bar above the message box instead (.is-bar, set by
   report-assistant.js), and its answers open over the chat. The card takes
   about a third of the chat (372-520 px) and its whole height, level with the
   ticks: narrower, every answer ran to three or four short lines ("the
   paragraphs seem longer"). */
.gx-report-ready-review {
  border: 1px solid var(--gxr-accent);
  border-radius: var(--gxr-r-card);
  background: var(--gxr-tint);
  padding: 16px 18px;
}
.gx-report-main.is-interviewing .gx-report-chat:has(> .gx-report-ready-review:not([hidden]):not(.is-bar)) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(372px, 36%, 520px);
  grid-template-rows: auto minmax(0, 1fr) auto;
}
.gx-report-chat:has(> .gx-report-ready-review:not([hidden]):not(.is-bar)) > .gx-report-parameter-strip { grid-column: 1; grid-row: 1; }
.gx-report-chat:has(> .gx-report-ready-review:not([hidden]):not(.is-bar)) > .gx-report-messages { grid-column: 1; grid-row: 2; }
.gx-report-chat:has(> .gx-report-ready-review:not([hidden]):not(.is-bar)) > .gx-report-composer { grid-column: 1; grid-row: 3; }
.gx-report-ready-review:not([hidden]):not(.is-bar) {
  grid-column: 2; grid-row: 1 / span 3;
  min-height: 0; margin: 16px 24px 16px 0;
  display: flex; flex-direction: column; overflow: hidden;
}
.gx-report-ready-head {
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
}
.gx-report-ready-head span {
  font-family: var(--gxr-font-display);
  color: var(--gxr-accent-ink);
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em;
}
.gx-report-ready-head h2 {
  font-family: var(--gxr-font-display);
  font-size: 17px; font-weight: 700; margin: 3px 0; color: var(--gxr-ink);
}
/* The answers: the card's own list, scrolling inside it. */
.gx-report-ready-answers { flex: 1; min-height: 0; overflow: auto; margin: 14px 0; }
.gx-report-ready-values {
  display: grid; grid-template-columns: minmax(0, 1fr);
  gap: 8px 20px; align-content: start;
}
.gx-report-ready-values > div { border-top: 1px solid var(--gxr-border); padding-top: 8px; }
.gx-report-ready-values strong { font-size: 12px; color: var(--gxr-ink); }
.gx-report-ready-values p {
  font-size: 12px; line-height: 1.45; margin: 4px 0;
  color: var(--gxr-ink-soft); white-space: pre-wrap;
}
.gx-report-ready-review:not(.is-bar) .gx-report-generate-btn { flex: 0 0 auto; width: 100%; }
/* The bar's own parts. */
.gx-report-ready-line,
.gx-report-ready-toggle,
.gx-report-ready-answers-head { display: none; }

/* The bar: one line above the message box, in line with it; the answers
   open over the chat from "Review answers". */
.gx-report-ready-review.is-bar:not([hidden]) {
  position: relative; z-index: 2;  /* above the message box's fade */
  display: flex; align-items: center; gap: 12px;
  margin: 0 32px 2px 40px;
  padding: 9px 10px 9px 14px;
  border-radius: var(--gxr-r-ctl);
}
.gx-report-ready-review.is-bar .gx-report-ready-head { display: none; }
.gx-report-ready-review.is-bar .gx-report-ready-line {
  display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; margin: 0;
  font: 400 13.5px/1.4 var(--gxr-font); color: var(--gxr-ink-soft);
}
.gx-report-ready-line b { color: var(--gxr-ink); font-weight: 600; }
.gx-report-ready-tick {
  flex: 0 0 auto; width: 22px; height: 22px; border-radius: var(--gxr-r-pill);
  display: grid; place-items: center;
  background: var(--gxr-accent); color: var(--gxr-surface);
  font-size: 12px; font-weight: 700;
}
.gx-report-ready-review.is-bar .gx-report-ready-toggle {
  display: inline-block; padding: 6px 4px; border: 0; background: transparent;
  color: var(--gxr-accent-ink); font: 500 13px var(--gxr-font);
  text-decoration: underline; white-space: nowrap; cursor: pointer;
}
.gx-report-ready-review.is-bar .gx-report-generate-btn { padding: 9px 16px; white-space: nowrap; }
.gx-report-ready-review.is-bar .gx-report-ready-answers {
  display: none; position: absolute; left: 0; right: 0; bottom: calc(100% + 8px); z-index: 5;
  max-height: min(52vh, 430px); margin: 0; padding: 14px 18px 16px;
  background: var(--gxr-surface); border: 1px solid var(--gxr-border);
  border-radius: var(--gxr-r-card); box-shadow: var(--gxr-shadow-card);
}
.gx-report-ready-review.is-bar.is-open .gx-report-ready-answers { display: block; }
.gx-report-ready-review.is-bar .gx-report-ready-answers-head {
  display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px;
}
.gx-report-ready-answers-head strong { font: 700 15px var(--gxr-font-display); color: var(--gxr-ink); }
.gx-report-ready-answers-head span { flex: 1; font-size: 12.5px; color: var(--gxr-muted); }
.gx-report-ready-answers-head button {
  border: 0; background: transparent; cursor: pointer;
  font-size: 20px; line-height: 1; color: var(--gxr-muted);
}
.gx-report-ready-review.is-bar .gx-report-ready-values { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 700px) {
  .gx-report-ready-review.is-bar:not([hidden]) { margin: 0 16px 2px; }
}

/* A section's figure step waiting while another section is on screen: a strip
   across the top offers it (renderFigureNote), in the ready card's green,
   instead of the page switching to it mid-answer (owner, 30 Sep 2026). */
.gx-report-figure-note:not([hidden]) {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 12px;
  padding: 10px 16px 10px 24px;
  border-bottom: 1px solid var(--gxr-accent);
  background: var(--gxr-tint);
}
.gx-report-figure-note p { flex: 1; min-width: 0; margin: 0; font-size: 14px; color: var(--gxr-ink-soft); }
.gx-report-figure-note p b { color: var(--gxr-ink); font-weight: 600; }
.gx-report-figure-note .gx-report-generate-btn { padding: 9px 16px; white-space: nowrap; }

.gx-report-empty,
.gx-report-working {
  max-width: 620px;
  margin: 12vh auto;
  text-align: center;
  background: var(--gxr-surface);
  padding: 52px;
  border: 1px solid var(--gxr-border);
  border-radius: var(--gxr-r-card);
  box-shadow: var(--gxr-shadow-card);
}
.gx-report-empty-mark {
  font: 700 28px var(--gxr-font-mono);
  color: var(--gxr-brand);
}
.gx-report-empty h1 {
  font-family: var(--gxr-font-display);
  font-weight: 700; font-size: 28px; margin: 14px 0; color: var(--gxr-ink);
}
.gx-report-empty p { line-height: 1.65; color: var(--gxr-ink-soft); }
.gx-report-empty small { color: var(--gxr-muted); }
.gx-report-empty button { display: block; margin: 26px auto 15px; }

.gx-report-template-picker {
  display: block; margin: 24px auto 0; padding: 18px;
  border: 1px dashed var(--gxr-border-strong);
  border-radius: var(--gxr-r-ctl);
  background: var(--gxr-surface-2);
  cursor: pointer; text-align: left;
  transition: border-color .15s, background .15s;
}
.gx-report-template-picker:hover {
  border-color: var(--gxr-accent); background: var(--gxr-tint);
}
.gx-report-template-picker strong,
.gx-report-template-picker span { display: block; }
.gx-report-template-picker span {
  margin-top: 5px; color: var(--gxr-muted); font-size: 12px;
  overflow: hidden; text-overflow: ellipsis;
}
.gx-report-template-picker input { margin-top: 13px; width: 100%; }

/* ══ Generation loaders ══
   One card for "writing a section" and "preparing the report": the chat's
   blinking >_ mark, its typewriter gx-loader line, a bar, and a sheet of
   paper filling in. The bar is indeterminate while a section is written
   (the server reports no progress inside one) and real progress when the
   whole report is built stage by stage. */
.gx-report-section-loading {
  flex: 1; overflow: auto;
  display: grid; place-items: start center;
  padding: clamp(24px, 7vh, 72px) 24px 40px;
  background: var(--gxr-canvas);
}
.gx-report-section-loading[hidden] { display: none; }
.gx-report-working { padding: 0; text-align: left; background: transparent; border: 0; box-shadow: none; }
.gx-gen-card {
  width: min(640px, 100%);
  box-sizing: border-box;
  background: var(--gxr-surface);
  border: 1px solid var(--gxr-border);
  border-radius: var(--gxr-r-card);
  box-shadow: var(--gxr-shadow-card);
  padding: 28px 30px 24px;
  text-align: left;
  animation: gxGenIn 360ms var(--ease, ease) both;
}
@keyframes gxGenIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.gx-gen-head { display: flex; align-items: center; gap: 14px; }
.gx-gen-heading { flex: 1; min-width: 0; }
.gx-gen-kicker {
  display: block; font: 600 11px/1.2 var(--gxr-font-mono);
  letter-spacing: .08em; text-transform: uppercase; color: var(--gxr-muted);
}
.gx-gen-heading h2 {
  margin: 4px 0 0; font: 600 19px/1.3 var(--gxr-font-display);
  letter-spacing: -.01em; color: var(--gxr-ink);
}
.gx-gen-time {
  flex: none; font: 500 12px var(--gxr-font-mono); color: var(--gxr-muted);
  font-variant-numeric: tabular-nums;
  padding: 4px 9px; border: 1px solid var(--gxr-border); border-radius: var(--gxr-r-pill);
}
.gx-gen-card .gx-loader { margin: 16px 0 12px 46px; }
.gx-gen-bar {
  position: relative; height: 4px; overflow: hidden;
  border-radius: var(--gxr-r-pill); background: var(--gxr-track);
}
.gx-gen-bar > span {
  position: absolute; top: 0; bottom: 0; left: 0; width: var(--gx-progress, 0%);
  border-radius: inherit; background: var(--gxr-brand);
  transition: width .6s var(--ease, ease);
}
.gx-gen-head + .gx-gen-bar { margin-top: 22px; }
.gx-gen-bar.is-indeterminate > span { width: 34%; animation: gxGenSlide 1.6s var(--ease, ease) infinite; }
@keyframes gxGenSlide { from { left: -34%; } to { left: 100%; } }
.gx-gen-stage { margin-top: 10px; font: 500 12.5px var(--gxr-font-mono); color: var(--gxr-ink-soft); }
.gx-gen-topics-label {
  margin: 20px 0 8px; font: 600 11px var(--gxr-font-mono);
  letter-spacing: .08em; text-transform: uppercase; color: var(--gxr-muted);
}
.gx-gen-topics { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.gx-gen-topics li {
  position: relative; overflow: hidden;
  font: 500 12px/16px var(--gxr-font); color: var(--gxr-ink-soft);
  padding: 5px 11px; border: 1px solid var(--gxr-border); border-radius: var(--gxr-r-pill);
  background: var(--gxr-surface-2);
}
/* A light sweep crosses the topics one after another — motion, not a claim
   that any topic is finished. */
.gx-gen-topics li::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, var(--gxr-tint), transparent);
  transform: translateX(-100%);
  animation: gxGenSweep 2.4s ease-in-out infinite;
  animation-delay: calc(var(--i, 0) * 280ms);
}
@keyframes gxGenSweep { 0% { transform: translateX(-100%); } 45%, 100% { transform: translateX(100%); } }
.gx-gen-paper {
  display: grid; gap: 9px; margin-top: 22px; padding: 18px 20px;
  border: 1px solid var(--gxr-border); border-radius: var(--gxr-r-ctl);
  background: var(--gxr-canvas);
}
.gx-gen-paper span {
  display: block; height: 8px; width: var(--w, 90%); border-radius: 4px;
  background: linear-gradient(90deg, var(--gxr-track) 0%, var(--gxr-hover) 40%, var(--gxr-track) 80%);
  background-size: 300% 100%;
  animation: gxGenShimmer 1.8s linear infinite;
}
.gx-gen-paper span:first-child { height: 11px; }
.gx-gen-paper span.is-gap { margin-top: 8px; height: 10px; }
@keyframes gxGenShimmer { from { background-position: 100% 0; } to { background-position: -200% 0; } }
.gx-gen-note { margin: 16px 0 0; font-size: 12.5px; line-height: 1.55; color: var(--gxr-muted); }
@media (prefers-reduced-motion: reduce) {
  .gx-gen-card, .gx-gen-bar > span, .gx-gen-topics li::after, .gx-gen-paper span { animation: none; }
}
@media (max-width: 700px) {
  .gx-gen-card { padding: 22px 18px 18px; }
  .gx-gen-card .gx-loader { margin-left: 0; }
}

.gx-report-spinner {
  display: block; width: 34px; height: 34px; margin: 0 auto 18px;
  border: 3px solid var(--gxr-border);
  border-top-color: var(--gxr-accent);
  border-radius: 50%;
  animation: gxReportSpin .8s linear infinite;
}
/* Keyframe name is consumed by report-progress.css as well — do not rename. */
@keyframes gxReportSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .gx-report-spinner { animation-duration: 2.4s; }
}

/* ══ Editor paper stack, toolbar, progress preview, revisions ══ */
.gx-report-editor-wrap { max-width: 900px; margin: 0 auto; }

/* THE TEXT EDITOR WITH THE CHAT BESIDE IT (owner ruling, 17 Sep 2026): the
   same two columns the Word editor gets, because it is the same idea — the
   report being edited on the left, Guidex advising on the right. The chat
   panel is the very element from the Word view, moved here by render(). */
.gx-report-main.is-text-chat {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--gx-report-chat-w, clamp(380px, 36vw, 620px));
  height: 100%; min-height: 0; padding: 0; overflow: hidden;
}
.gx-report-main.is-text-chat > .gx-report-editor-wrap {
  max-width: none; margin: 0; min-width: 0; min-height: 0;
  overflow: auto; padding: 18px 22px 28px;
}
.gx-report-main.is-text-chat > .gx-report-word-chat { height: 100%; min-height: 0; }

.gx-report-toolbar {
  position: sticky;
  /* Tied to .gx-report-main's top padding — written as a calc of the same
     token so the two can never drift again. */
  top: calc(-1 * var(--gxr-main-pad-y));
  z-index: 2;
  display: flex; gap: 5px; align-items: center;
  background: var(--gxr-surface-2);
  border: 1px solid var(--gxr-border);
  border-radius: var(--gxr-r-btn) var(--gxr-r-btn) 0 0;
  padding: 8px;
}
.gx-report-toolbar button {
  color: var(--gxr-ink-soft);
  border-color: var(--gxr-border);
  background: var(--gxr-surface);
  padding: 6px 9px;
  font-size: 13px;
}
.gx-report-toolbar button:hover { background: var(--gxr-hover); color: var(--gxr-ink); }

.gx-report-title-input {
  display: block; width: 100%; box-sizing: border-box;
  border: 1px solid var(--gxr-border); border-top: 0;
  background: var(--gxr-surface);
  /* left padding must match .gx-report-paper's 54px gutter */
  padding: 24px 54px 10px;
  font: 700 24px var(--gxr-font-display);
  color: var(--gxr-ink);
  outline: none;
}

.gx-report-paper {
  min-height: 1120px;
  background: var(--gxr-surface);
  border: 1px solid var(--gxr-border); border-top: 0;
  box-shadow: var(--gxr-shadow-card);
  padding: 28px 54px 75px;
  outline: none;
  line-height: 1.62;
  /* --gxr-paper-* are set by applyTemplateLook() from the uploaded Word
     template, so the paper wears its fonts, sizes and colours; without a
     Word template each falls back to the Guidex paper. */
  font-family: var(--gxr-paper-font, var(--gxr-font));
  font-size: var(--gxr-paper-size, 14.5px);
  color: var(--gxr-paper-ink, var(--gxr-ink-soft));
  print-color-adjust: exact;
  -webkit-print-color-adjust: exact;
}
.gx-report-paper h1 {
  font-family: var(--gxr-paper-h-font, var(--gxr-font-display));
  font-size: 32px; font-weight: 700; color: var(--gxr-paper-h-color, var(--gxr-ink)); margin: 0 0 30px;
}
.gx-report-paper h2 {
  font-family: var(--gxr-paper-h-font, var(--gxr-font-display));
  font-size: var(--gxr-paper-h-size, 23px); font-weight: 700; color: var(--gxr-paper-h-color, var(--gxr-ink));
  text-transform: var(--gxr-paper-h-transform, none);
  margin: 38px 0 14px;
  border-bottom: 1px solid var(--gxr-border); padding-bottom: 8px;
}
.gx-report-paper h3 {
  font-family: var(--gxr-paper-sub-font, var(--gxr-font-display));
  font-size: var(--gxr-paper-sub-size, 18px); font-weight: 600; color: var(--gxr-paper-sub-color, var(--gxr-accent-ink)); margin: 24px 0 10px;
}
.gx-report-paper table { width: 100%; border-collapse: collapse; margin: 16px 0; }
.gx-report-paper th,
.gx-report-paper td {
  border: 1px solid var(--gxr-border); padding: 8px 10px;
  text-align: left; vertical-align: top;
}
.gx-report-paper th { background: var(--gxr-paper-th-fill, var(--gxr-tint)); color: var(--gxr-paper-th-ink, var(--gxr-ink)); }
.gx-report-paper blockquote {
  border-left: 4px solid var(--gxr-accent);
  margin: 18px 0; padding: 8px 16px; background: var(--gxr-tint);
}

.gx-report-progress-preview { max-width: 980px; margin: 0 auto; }
/* The PDF view takes the whole report area: the viewer needs the room to be
   readable, and it brings its own zoom. */
.gx-report-progress-preview:has(.gx-report-pdf-view) {
  max-width: none; height: 100%; display: flex; flex-direction: column;
}
.gx-report-main:has(.gx-report-pdf-view:not([hidden])) { padding-bottom: 12px; }
.gx-report-pdf-view {
  flex: 1; min-height: 70vh; display: flex;
  border: 1px solid var(--gxr-border); border-radius: var(--gxr-r-ctl); overflow: hidden; background: var(--gxr-track);
}
.gx-report-pdf-frame { flex: 1; width: 100%; min-height: 70vh; border: 0; background: #525659; }
.gx-report-progress-preview > header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 14px;
}
.gx-report-progress-preview > header span {
  font-family: var(--gxr-font-display);
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; color: var(--gxr-muted);
}
.gx-report-progress-preview > header h1 {
  font-family: var(--gxr-font-display);
  margin: 3px 0; font-size: 26px; font-weight: 700; color: var(--gxr-ink);
}
.gx-report-progress-preview > header button {
  border: 1px solid var(--gxr-border);
  background: var(--gxr-surface);
  color: var(--gxr-ink-soft);
  border-radius: var(--gxr-r-btn);
  padding: 9px 12px; cursor: pointer;
}
/* The way back to the interview is the main action on this screen. */
.gx-report-progress-preview > header button.gx-report-continue {
  border-color: var(--gxr-ink); background: var(--gxr-ink); color: var(--gxr-surface);
  font-weight: 600; padding: 10px 16px;
}
.gx-report-progress-preview > header button.gx-report-continue:hover { background: var(--gxr-accent); border-color: var(--gxr-accent); }
.gx-report-progress-preview > header { position: sticky; top: calc(-1 * var(--gxr-main-pad-y)); z-index: 2; background: var(--gxr-canvas); padding-block: 12px; }
.gx-report-progress-preview .gx-report-paper { min-height: 600px; }
.gx-report-progress-preview .gx-report-paper section + section {
  border-top: 4px solid var(--gxr-border);
  margin-top: 42px; padding-top: 6px;
}

/* "View report" as Word pages (docx-preview). The element drops the
   .gx-report-paper class while it holds pages, so the editor's own heading,
   table and caveat styles cannot restyle the template. */
/* "Attach Word template" on a report that has no Word file yet. */
.gx-report-actions button.is-attention {
  border-color: var(--gxr-amber-border); background: var(--gxr-amber-bg); color: var(--gxr-amber);
}
.gx-report-docx-view {
  min-height: 600px; overflow-x: auto;
  border: 1px solid var(--gxr-border); border-radius: var(--gxr-r-ctl);
  background: var(--gxr-track);
}
.gx-report-docx-view .gx-docx-wrapper { background: transparent; padding: 24px 16px; }
.gx-report-docx-view .gx-docx-wrapper > section.gx-docx {
  box-shadow: 0 1px 3px rgba(26,29,32,.12), 0 8px 24px rgba(26,29,32,.08);
  margin-bottom: 24px;
}
/* The LibreOffice PDF, one canvas per page. */
.gx-pdf-pages { display: grid; justify-items: center; gap: 20px; padding: 24px; }
.gx-pdf-page {
  display: block; max-width: 100%; background: #fff;
  box-shadow: 0 1px 3px rgba(26,29,32,.12), 0 8px 24px rgba(26,29,32,.08);
}
.gx-docx-loading { display: grid; place-items: center; min-height: 320px; }
.gx-docx-error { padding: 40px 24px; text-align: center; color: var(--gxr-muted); }

.gx-report-revisions {
  width: 300px;
  border-left: 1px solid var(--gxr-border);
  background: var(--gxr-surface);
  overflow: auto;
}
.gx-report-revisions-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px; border-bottom: 1px solid var(--gxr-border);
}
.gx-report-revisions-head button {
  border: 0; background: transparent; font-size: 18px; color: var(--gxr-ink);
}
.gx-report-revision strong,
.gx-report-revision span { display: block; }
.gx-report-revision span { font-size: 12px; color: var(--gxr-muted); margin: 4px 0 8px; }
.gx-report-revision button {
  border: 1px solid var(--gxr-border);
  background: var(--gxr-surface);
  border-radius: var(--gxr-r-btn);
  padding: 5px 8px; cursor: pointer;
}

@media (max-width: 900px) {
  .gx-report-main { padding: 18px 12px 50px; }
  .gx-report-toc { display: none; }
  /* Used to hide .gx-report-actions button:first-child to make room, but
     that selector always lands on #gxReportTemplateBtn (the DOM's actual
     first child, even while its `hidden` attribute keeps it offscreen the
     rest of the time) — so the one time that button is shown, the amber
     Attach-template CTA vanished instead of a spare control. The row now
     scrolls itself instead (.gx-report-actions { overflow-x: auto }, above),
     so no button needs hiding here (rule 4, owner, 17 Sep 2026). */
  .gx-report-save-state { display: none; }
  .gx-report-paper { padding: 22px; }
  .gx-report-title-input { padding-left: 22px; }
  .gx-report-brand { display: none; }
  .gx-report-revisions {
    position: fixed; top: var(--gxr-header-h); right: 0; bottom: 0; z-index: 3;
  }
}

/* ══ Caveat highlight, error state, entry button, scratch banner — semantics preserved ══ */
/* The literal `background: #fff5d6` is asserted by
   test-report-assistant.js:361 — keep the hex here even though the token
   exists, and keep all three selectors. This is a compliance affordance:
   assumptions, RFIs and design actions are only findable by skim because
   of it. */
.gx-report-paper em,
#gxReportEditor em,
.gx-report-section-preview em {
  background: #fff5d6;
  box-shadow: 0 0 0 1px var(--gxr-caveat-ring);
  border-radius: 3px;
  padding: 1px 4px;
  font-style: italic;
  color: var(--gxr-caveat-ink);
}

.gx-report-error { color: var(--gxr-danger); font-weight: 600; }

.gx-report-entry { border-color: var(--gxr-brand) !important; }

/* Unchanged in behaviour, tokenised in colour. This banner is the user's
   only assurance that nothing drawn is being saved — never remove, fade or
   scroll it out of view. Keep the z-index declarations byte-identical:
   they are matched by regex. */
/* ─── Opening a fire strategy project ───────────────────────────────────────
   Its destination is the report screen, but enterProject reveals #app the
   moment it starts, and the report cannot appear until the workspace, the chat
   and the report itself have all come back. That gap showed the chat screen
   for seconds.

   So for the length of the trip, the list the user clicked from stays put and
   #app stays off it. The report overlay (z-index 8800) then covers the list,
   and the class is removed in a finally — a refused jump still gives #app
   back. Same rule as the wizard: the current screen stays up until the next
   one is up.

   #projectsLanding by id, NOT .gf-projects-landing: the billing and account
   access screens share that class, so the class selector forced all three
   up at once and the last one in the page (Account access) flashed on top. */
body.gx-report-opening #app { display: none !important; }
body.gx-report-opening #projectsLanding { display: flex !important; }

body.gx-report-scratch-plan .idz-overlay{z-index:8900}
body.gx-report-scratch-plan .idz-overlay::before {
  content: 'Scratch measuring for the report — nothing here is saved to Markup';
  position: absolute; top: 0; left: 0; right: 0; z-index: 9;
  background: var(--gxr-scratch-banner);
  color: #fff;
  text-align: center;
  padding: 5px 12px;
  font: 600 11px var(--gxr-font);
  letter-spacing: .02em;
  pointer-events: none;
}

/* A figure capture opens a REAL markup session — scratch for an ordinary
   figure (lifted above by the rule above), but KEPT for a site plan
   (gxReportStartFigure's keepMarkup:true), which never sets
   gx-report-scratch-plan at all. That session's overlay was left at its base
   4000, under the report's 8800: "Add the site plan" showed the B4 page with
   only the floating figure bar over it and no plan underneath (owner, 17 Sep
   2026). gx-report-figure-capture goes on for every figure, kept or not, so
   lifting on it covers the site-plan path without touching the scratch gate. */
body.gx-report-figure-capture .idz-overlay,
body.gx-report-figure-capture .idz-export,
body.gx-report-figure-capture .bb-modal-back {
  z-index: 8900 !important;
}
body.gx-report-figure-capture .idz-vmenu,
body.gx-report-figure-capture .gx-img-grip { z-index: 8960 !important; }

/* Toasts sit at z-index 2200, under this opaque 8800 overlay, so every
   showToast() error path in report-assistant.js and measurements.js is
   currently swallowed. One line fixes it. */
body.gx-report-active #toast { z-index: 8850; }

/* ══ Split-screen block — literals unchanged, only the padding twins retuned ══ */
@media (min-width: 701px) {
  .gx-report-screen{transition:right .22s ease-out}
  body.gx-report-active .chat-plan-panel.open{position:fixed;top:0;right:0;bottom:0;width:50vw;z-index:8810}
  body.gx-report-active .gf-source-slideout{z-index:8820}
  body.gx-report-active.gf-plan-pane-open .gx-report-screen{right:50vw}
  body.gx-report-active.gf-source-open .gx-report-screen{right:var(--gf-source-w)}
  body.gx-report-active.gf-source-open.gf-plan-pane-open .chat-plan-panel.open{width:32.5vw;right:var(--gf-source-w)}
  body.gx-report-active.gf-source-open.gf-plan-pane-open .gx-report-screen{right:calc(32.5vw + var(--gf-source-w))}
}

@media (min-width: 701px) {
  /* These two lines are matched by regex and must stay within 80 chars
     of each other. */
  body.gx-report-active.gf-plan-pane-open .gx-report-toc,
  body.gx-report-active.gf-source-open   .gx-report-toc{display:none}
  body.gx-report-active.gf-plan-pane-open .gx-report-shell,
  body.gx-report-active.gf-source-open   .gx-report-shell{grid-template-columns:minmax(0,1fr)}

  /* Paired twins of the base padding above. Retuned to the new 24px base
     so the two layouts stay in step. */
  body.gx-report-active.gf-plan-pane-open .gx-report-main.is-interviewing .gx-report-intake,
  body.gx-report-active.gf-source-open   .gx-report-main.is-interviewing .gx-report-intake { padding: 20px 18px; }
  body.gx-report-active.gf-plan-pane-open .gx-report-main.is-interviewing .gx-report-messages,
  body.gx-report-active.gf-source-open   .gx-report-main.is-interviewing .gx-report-messages { padding: 16px 18px; }
  body.gx-report-active.gf-plan-pane-open .gx-report-main.is-interviewing .gx-report-composer,
  body.gx-report-active.gf-source-open   .gx-report-main.is-interviewing .gx-report-composer { padding: 14px 18px; }
  body.gx-report-active.gf-plan-pane-open .gx-report-interview-head,
  body.gx-report-active.gf-source-open   .gx-report-interview-head { padding: 10px 18px; }
  body.gx-report-active.gf-plan-pane-open .gx-report-parameter-strip,
  body.gx-report-active.gf-source-open   .gx-report-parameter-strip { padding: 12px 18px; }
  body.gx-report-active.gf-plan-pane-open .gx-report-messages .message.user > .bubble,
  body.gx-report-active.gf-source-open   .gx-report-messages .message.user > .bubble { max-width: 94%; }
  body.gx-report-active.gf-plan-pane-open .gx-report-ready-values,
  body.gx-report-active.gf-source-open   .gx-report-ready-values { grid-template-columns: minmax(0,1fr); }
  body.gx-report-active.gf-plan-pane-open .gx-report-ready-review,
  body.gx-report-active.gf-source-open   .gx-report-ready-review { margin-left: 18px; margin-right: 18px; }

  /* Used to reuse the max-width:900 trick and hide
     .gx-report-actions button:first-child here too, but that selector always
     lands on #gxReportTemplateBtn — the DOM's actual first child even while
     `hidden` keeps it offscreen most of the time — so the one time it is
     shown (a template attached that does not fit Word yet) it silently
     vanished instead of a spare control. The row scrolls itself when it does
     not fit (.gx-report-actions { overflow-x: auto }, above), so nothing
     needs hiding here either (rule 4, owner, 17 Sep 2026). */
  body.gx-report-active.gf-plan-pane-open .gx-report-save-state,
  body.gx-report-active.gf-source-open   .gx-report-save-state { display: none; }
  body.gx-report-active.gf-plan-pane-open .gx-report-brand,
  body.gx-report-active.gf-source-open   .gx-report-brand { display: none; }
}

/* ══ Print block — unchanged in shape, retuned for the white chrome ══ */
@media print {
  /* Specificity (1,0,1) because :not() inherits its argument's id weight.
     This already outranks initial-design.css's .idz-export.open rule, so
     printing the markup PDF export yields a blank sheet. Leaving the
     behaviour exactly as it is today — changing it is a separate decision. */
  body > *:not(#gxReportScreen) { display: none !important; }
  .gx-report-screen { position: static; background: #fff; }
  .gx-report-header,
  .gx-report-toc,
  .gx-report-toolbar,
  .gx-report-title-input,
  .gx-report-revisions { display: none !important; }
  .gx-report-shell { display: block; }
  .gx-report-main { padding: 0; overflow: visible; }
  .gx-report-paper {
    box-shadow: none; border: 0; padding: 0; min-height: 0;
  }
  /* New: the paper's tinted table headers and the caveat highlight are now
     token-driven, and this screen never got print-color-adjust (only
     .idz-export.open did). Without it the <th> tint and the compliance
     highlight print as plain white. */
  .gx-report-paper,
  .gx-report-paper th,
  .gx-report-paper em {
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }
}

/* ══ Rules the restyle would otherwise have dropped ══════════════════════════
   Found by diffing the old stylesheet's selector list against the new one.
   Each is here because nothing else in the new sheet covers it. */

/* One row in the Versions rail. Without this the rows have no padding and no
   separator, so a list of five revisions reads as one paragraph. */
.gx-report-revision {
  padding: 14px 18px;
  border-bottom: 1px solid var(--gxr-border);
}

/* A step for a section that cannot be opened yet. State is carried by opacity
   AND the cursor, so it does not depend on colour alone. */
.gx-report-toc:has(.gx-report-section-step) .gx-report-section-step:disabled {
  opacity: .45;
  cursor: not-allowed;
}

/* The just-generated section, shown under the interview before the engineer
   moves on. It is report prose, so it is set on paper, not on the canvas. */
.gx-report-section-preview {
  min-height: 0;
  margin-top: 24px;
  padding: 25px;
}
.gx-report-section-preview h2:first-child { margin-top: 0; }

/* Base widths for the two interview panels. .is-interviewing overrides both to
   full-bleed; these only apply if the interview is ever shown outside it. */
.gx-report-interview { max-width: 900px; margin: 0 auto; }
.gx-report-intake,
.gx-report-chat {
  background: var(--gxr-surface);
  border: 1px solid var(--gxr-border);
  border-top: 0;
  padding: 28px 30px;
}

/* ══ Reopen a finished section ══ */
.gx-report-reopen-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  margin: 0 32px 8px 40px; padding: 12px 16px;
  border: 1px solid var(--gxr-border); border-radius: var(--gxr-r-card);
  background: var(--gxr-surface); color: var(--gxr-ink-soft); font-size: 13.5px;
}
.gx-report-reopen-bar button {
  flex: none; border: 1px solid var(--gxr-border-strong); background: var(--gxr-surface);
  color: var(--gxr-ink); border-radius: var(--gxr-r-ctl); padding: 9px 14px;
  font: 600 13px var(--gxr-font); cursor: pointer;
}
.gx-report-reopen-bar button.is-primary { background: var(--gxr-ink); border-color: var(--gxr-ink); color: var(--gxr-surface); }
.gx-report-reopen-bar button.is-primary:hover { background: var(--gxr-accent); border-color: var(--gxr-accent); }
.gx-report-reopen-review {
  flex: 0 1 auto; max-height: 46%; overflow: auto;
  margin: 0 32px 6px 40px; padding: 16px 18px;
  border: 1px solid var(--gxr-amber-border); border-radius: var(--gxr-r-card); background: var(--gxr-amber-bg);
}
.gx-report-reopen-head span {
  font: 700 11px var(--gxr-font-display); text-transform: uppercase; letter-spacing: .05em; color: var(--gxr-amber);
}
.gx-report-reopen-head h2 { font: 700 17px var(--gxr-font-display); margin: 3px 0 10px; color: var(--gxr-ink); }
.gx-report-reopen-changes { display: grid; gap: 8px; }
.gx-report-reopen-changes > div { border-top: 1px solid var(--gxr-amber-border); padding-top: 8px; }
.gx-report-reopen-changes strong { font-size: 12.5px; color: var(--gxr-ink); }
.gx-report-reopen-changes p { margin: 3px 0; font-size: 12.5px; line-height: 1.45; white-space: pre-wrap; }
.gx-report-reopen-changes p.is-was { color: var(--gxr-muted); text-decoration: line-through; }
.gx-report-reopen-changes p.is-now { color: var(--gxr-ink); }
.gx-report-reopen-none { margin: 0; font-size: 13px; color: var(--gxr-ink-soft); }
.gx-report-reopen-warnings { margin: 12px 0 0; padding-left: 18px; font-size: 12.5px; line-height: 1.5; color: var(--gxr-amber); }
.gx-report-reopen-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 14px; }
.gx-report-reopen-cancel {
  border: 0; background: transparent; color: var(--gxr-ink-soft); text-decoration: underline; cursor: pointer; font-size: 13px;
}
.gx-report-reopen-cancel:disabled { opacity: .5; cursor: not-allowed; }
@media (max-width: 700px) {
  .gx-report-reopen-bar, .gx-report-reopen-review { margin-left: 16px; margin-right: 16px; }
  .gx-report-reopen-bar { flex-direction: column; align-items: stretch; }
}

.gx-report-reopen-why { margin: 8px 0 0; font-size: 12.5px; color: var(--gxr-amber); }


/* ══ Edit plan from the report ══ */
/* While the plan editor is open the report steps aside: the editor and its
   pop-ups live on the page below. It is back the moment the editor closes. */
/* ── Stepping the report aside, without uncovering the app ────────────────
   This was `visibility: hidden` on the whole report. The report sits at 8800
   and the plan builder at 100, so hiding the report was the only way to show
   the builder — and hiding it uncovered the workspace CHAT behind it for as
   long as the builder took to appear. That flash happened on every path that
   left the report (owner, 16 Sep 2026).
   Now the report KEEPS its opaque surface and only its contents are blanked,
   and whatever we are stepping aside FOR is raised above it. There is then
   nothing underneath to see, on any path, ever. */
body.gx-report-plan-editing #gxReportScreen > * { visibility: hidden; }
body.gx-report-plan-editing .modal-backdrop,
body.gx-report-plan-editing .idz-overlay,
body.gx-report-plan-editing .idz-export,
body.gx-report-plan-editing .bb-modal-back {
  /* !important beats the wizard's own inline z-index. */
  z-index: 8900 !important;
}
/* Menus and pop-ups the builder opens must clear its own backdrop. */
body.gx-report-plan-editing .idz-vmenu,
body.gx-report-plan-editing .gx-img-grip { z-index: 8960 !important; }
.gx-report-view-tools { position: relative; }
.gx-report-plan-menu {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 20;
  min-width: 200px; padding: 6px; display: grid; gap: 2px;
  background: var(--gxr-surface); border: 1px solid var(--gxr-border);
  border-radius: var(--gxr-r-ctl); box-shadow: var(--gxr-shadow-card);
}
.gx-report-plan-menu button {
  text-align: left; border: 0; background: transparent; border-radius: 8px;
  padding: 8px 10px; font: 500 13px var(--gxr-font); color: var(--gxr-ink); cursor: pointer;
}
.gx-report-plan-menu button:hover { background: var(--gxr-hover); }

/* The editor's way back to the finished report in its template. */
.gx-report-toolbar button.gx-report-template-view { font-weight: 600; color: var(--gxr-ink); margin-right: 8px; }

/* ══ The finished report as a Word file (ONLYOFFICE) + the chat beside it ══ */
/* No B1-B5 rail here: the Word editor has its own navigation. Specificity
   (0,4,0) so it beats the Versions column rule and the narrow-screen rule. */
.gx-report-screen .gx-report-shell:has(.gx-report-main.is-word) { grid-template-columns: minmax(0, 1fr); }
.gx-report-screen .gx-report-shell:has(.gx-report-main.is-word):has(.gx-report-revisions:not([hidden])) { grid-template-columns: minmax(0, 1fr) 300px; }
.gx-report-shell:has(.gx-report-main.is-word) > .gx-report-toc { display: none; }
.gx-report-main.is-word { padding: 0; overflow: hidden; }
.gx-report-word {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--gx-report-chat-w, clamp(380px, 36vw, 620px));
  height: 100%;
  min-height: 0;
}
.gx-report-word[hidden] { display: none; }
.gx-report-word-doc { position: relative; min-width: 0; min-height: 0; height: 100%; background: #f3f4f6; }
.gx-report-word-doc > iframe,
.gx-report-word-doc > #gxReportWordEditor { display: block; width: 100%; height: 100%; border: 0; }
.gx-report-word-status {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  padding: 24px; background: var(--gxr-canvas); text-align: center;
}
.gx-report-word-status[hidden] { display: none; }
.gx-report-word-error { max-width: 420px; margin: 0; color: var(--gxr-ink-soft); line-height: 1.5; }
.gx-report-word-status button {
  border: 1px solid var(--gxr-border-strong); background: var(--gxr-surface); color: var(--gxr-ink);
  border-radius: 8px; padding: 8px 14px; font: inherit; cursor: pointer;
}
.gx-report-word-chat {
  display: flex; flex-direction: column; min-height: 0; min-width: 0;
  border-left: 1px solid var(--gxr-border); background: var(--gxr-canvas);
}
.gx-report-word-chat-head { flex: 0 0 auto; padding: 18px 20px 14px; border-bottom: 1px solid var(--gxr-border); background: var(--gxr-surface); }
.gx-report-word-chat-head span { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--gxr-muted); font-weight: 600; }
.gx-report-word-chat-head h2 { margin: 2px 0 6px; font-size: 17px; color: var(--gxr-ink); }
.gx-report-word-chat-head p { margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--gxr-muted); }
.gx-report-word-messages {
  flex: 1; min-height: 0; overflow: auto;
  display: flex; flex-direction: column; gap: 18px;
  padding: 18px 16px 12px; scrollbar-gutter: stable;
}
/* Same thin scrollbar as the section chat's list
   (.gx-report-messages::-webkit-scrollbar, above) — without this the panel
   falls back to the OS/Chromium default: a grey track with arrow buttons
   (rule 13, owner, 17 Sep 2026). */
.gx-report-word-messages::-webkit-scrollbar { width: 6px; }
.gx-report-word-messages::-webkit-scrollbar-track { background: transparent; }
.gx-report-word-messages::-webkit-scrollbar-thumb {
  background: var(--gxr-border-strong);
  border-radius: 999px;
}
.gx-report-word-messages .message.assistant > .bubble { max-width: 100%; }
.gx-report-word-messages .message.user > .bubble { max-width: 92%; }
.gx-report-word-messages .message.assistant > .bubble table { display: block; overflow-x: auto; font-size: 12.5px; }
.gx-report-word-hint {
  display: flex; flex-direction: column; gap: 6px;
  padding: 14px; border: 1px dashed var(--gxr-border-strong); border-radius: 10px;
  color: var(--gxr-muted); font-size: 13px; line-height: 1.45;
}
.gx-report-word-hint strong { color: var(--gxr-ink); font-weight: 600; }
.gx-report-composer.gx-report-word-composer { flex: 0 0 auto; padding: 10px 14px 10px; }
.gx-report-composer.gx-report-word-composer::before { top: -18px; height: 18px; }
@media (max-width: 900px) {
  .gx-report-word { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) 42vh; }
  .gx-report-word-chat { border-left: 0; border-top: 1px solid var(--gxr-border); }
}
.gx-report-word-messages .message.gx-settled,
.gx-report-word-messages .message.gx-settled > .bubble,
.gx-report-word-messages .message.gx-settled > .bubble > * { animation: none; }
/* Suggested wording is the point of the answer: readable, not an aside. */
.gx-report-word-messages .message.assistant blockquote {
  color: var(--gxr-ink-soft); font-style: normal;
  background: var(--gxr-surface); border-left: 3px solid var(--gxr-border-strong);
  border-radius: 0 6px 6px 0; padding: 8px 12px;
}

/* ══ The figure window, after B1, B4 and B5 ══ */
.gx-report-figures { padding: 26px 32px 32px; overflow: auto; }
.gx-report-figures[hidden] { display: none; }
.gx-report-figures > header > span {
  font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--gxr-muted); font-weight: 600;
}
.gx-report-figures > header h2 { margin: 3px 0 6px; font-size: 20px; color: var(--gxr-ink); }
.gx-report-figures > header p { margin: 0 0 18px; font-size: 13px; line-height: 1.5; color: var(--gxr-muted); max-width: 72ch; }
.gx-report-figure-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; }
.gx-report-figure-card {
  display: flex; flex-direction: column; gap: 8px;
  border: 1px solid var(--gxr-border); border-radius: 12px;
  background: var(--gxr-surface); padding: 16px 18px;
}
.gx-report-figure-card.is-own { background: var(--gxr-surface-2); }
.gx-report-figure-card strong { font-size: 15px; color: var(--gxr-ink); }
.gx-report-figure-why { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--gxr-muted); }
.gx-report-figure-card ul { margin: 0; padding-left: 18px; font-size: 12.5px; line-height: 1.55; color: var(--gxr-ink-soft); }
.gx-report-figure-card button { margin-top: auto; align-self: flex-start; }
.gx-report-figure-alt {
  border: 1px solid var(--gxr-border-strong); background: var(--gxr-surface); color: var(--gxr-ink);
  border-radius: 9px; padding: 9px 14px; font: inherit; font-weight: 600; cursor: pointer;
}
.gx-report-figure-alt:disabled { opacity: .5; cursor: default; }
.gx-report-figure-plan, .gx-report-figure-title {
  width: 100%; border: 1px solid var(--gxr-border); border-radius: 8px;
  padding: 9px 10px; font: inherit; background: var(--gxr-surface); color: var(--gxr-ink);
}
.gx-report-figure-added { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.gx-report-figure-added > div {
  display: flex; align-items: center; gap: 10px;
  border: 1px solid var(--gxr-border); border-radius: 9px; padding: 9px 12px; background: var(--gxr-surface);
}
.gx-report-figure-added span { font-size: 13.5px; color: var(--gxr-ink); font-weight: 600; }
.gx-report-figure-added small { color: var(--gxr-muted); font-size: 12px; margin-right: auto; }
.gx-report-figure-added button {
  border: 0; background: transparent; color: var(--gxr-muted); font: inherit; cursor: pointer; text-decoration: underline;
}
.gx-report-figure-foot { margin-top: 18px; }
.gx-report-figure-skip {
  border: 0; background: transparent; color: var(--gxr-ink-soft);
  font: inherit; font-weight: 600; cursor: pointer; text-decoration: underline;
}

/* The bar over the markup screen while a figure is being marked up. */
.gx-report-figure-bar {
  position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%); z-index: 100000;
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px; border-radius: 12px;
  background: var(--gxr-ink); color: #fff; box-shadow: 0 10px 30px rgba(0,0,0,.28);
  font-size: 13px; line-height: 1.4; max-width: min(92vw, 640px);
}
.gx-report-figure-bar[hidden] { display: none; }
.gx-report-figure-bar strong { font-size: 13.5px; }
.gx-report-figure-bar button {
  border: 1px solid rgba(255,255,255,.35); background: transparent; color: #fff;
  border-radius: 8px; padding: 8px 12px; font: inherit; cursor: pointer;
}
.gx-report-figure-bar button.is-primary { background: #fff; color: var(--gxr-ink); border-color: #fff; font-weight: 600; }
.gx-report-figure-bar.is-busy button { opacity: .6; pointer-events: none; }

/* ── References inside the report's chats ───────────────────────────────────
   Two kinds of link sit side by side in one reply and must never be confused:
   a GUIDANCE clause, which opens the document, and a PIN, which shows a thing
   on the plan. A guidance reference is drawn as ONE plain grey round box with
   the whole reference inside it — no coloured dot, no underline (owner,
   16 Sep 2026). Pin chips keep the teal they have everywhere else, untouched.
   Scoped to the report screen, so the project chat is not changed. */
#gxReportMessages .gf-citation,
#gxReportMessages .gf-citation-anchor,
#gxReportWordMessages .gf-citation,
#gxReportWordMessages .gf-citation-anchor {
  display: inline !important;
  background: var(--gxr-surface-2) !important;
  border: 1px solid var(--gxr-border) !important;
  border-radius: 999px !important;
  padding: 2px 9px !important;
  margin: 0 1px !important;
  color: var(--gxr-ink) !important;
  font-weight: 500 !important;
  font-size: .88em !important;
  line-height: 1.35 !important;
  text-decoration: none !important;
  /* One reference is one box: it moves to the next line whole rather than
     breaking in half. */
  white-space: nowrap;
  cursor: pointer;
  /* Selectable, so a copied answer keeps its references. */
  user-select: text;
  -webkit-user-select: text;
}
/* No dot, no arrow, no underline — the box is the whole signal. */
#gxReportMessages .gf-citation::before,
#gxReportMessages .gf-citation-anchor::before,
#gxReportWordMessages .gf-citation::before,
#gxReportWordMessages .gf-citation-anchor::before,
#gxReportMessages .gf-citation::after,
#gxReportMessages .gf-citation-anchor::after,
#gxReportWordMessages .gf-citation::after,
#gxReportWordMessages .gf-citation-anchor::after { content: none !important; }
#gxReportMessages .gf-citation:hover,
#gxReportMessages .gf-citation-anchor:hover,
#gxReportWordMessages .gf-citation:hover,
#gxReportWordMessages .gf-citation-anchor:hover {
  background: var(--gxr-hover) !important;
  border-color: var(--gxr-border-strong) !important;
}
/* A chip still being checked reads as provisional, not broken. */
#gxReportMessages .gf-citation-unverified,
#gxReportWordMessages .gf-citation-unverified { opacity: .72; }

/* The way on to the next section, on the "writing" card. */
.gx-gen-next {
  margin-top: 14px; border: 1px solid var(--gxr-border-strong); background: var(--gxr-surface);
  color: var(--gxr-ink); border-radius: 10px; padding: 10px 14px;
  font: inherit; font-weight: 600; font-size: 13.5px; cursor: pointer;
}
.gx-gen-next:hover { background: var(--gxr-surface-2); }
.gx-gen-next[hidden] { display: none; }

/* The capture bar's title box: named where the engineer can see the drawing. */
.gx-report-figure-bar-title { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1 1 260px; }
.gx-report-figure-bar-title > span { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; opacity: .75; }
.gx-report-figure-bar-title input {
  border: 1px solid rgba(255,255,255,.35); background: rgba(255,255,255,.08); color: #fff;
  border-radius: 8px; padding: 8px 10px; font: inherit; font-size: 13px; min-width: 0;
}
.gx-report-figure-bar-title input::placeholder { color: rgba(255,255,255,.55); }
.gx-report-figure-bar-title small { font-size: 11.5px; line-height: 1.35; opacity: .75; }
.gx-report-figure-bar button:disabled { opacity: .45; cursor: not-allowed; }
.gx-report-figure-bar-status { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; }
.gx-report-figure-spinner {
  width: 13px; height: 13px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.35); border-top-color: #fff;
  animation: gxFigureSpin .7s linear infinite;
}
@keyframes gxFigureSpin { to { transform: rotate(360deg); } }

/* A figure is drawn the way the report's own drawings are: the plan in grey,
   the pins and whatever the engineer marks on it in colour over the top. The
   grey comes from the markup tool's own baked copy (IDZ.setGreyscale), never a
   CSS filter on the live image — that blanked the plan (owner, 16 Sep 2026). */
body.gx-report-figure-capture .idz-pin-layer { z-index: 9; }

/* ── Trim the figure ────────────────────────────────────────────────────── */
.gx-crop-back {
  position: fixed; inset: 0; z-index: 100001;
  display: flex; align-items: center; justify-content: center;
  background: rgba(15, 18, 20, .62); padding: 24px;
}
.gx-crop-box {
  display: flex; flex-direction: column; gap: 14px;
  max-width: min(94vw, 980px); max-height: 92vh;
  padding: 18px; border-radius: 14px;
  background: var(--gxr-surface); color: var(--gxr-ink);
  box-shadow: 0 18px 48px rgba(0,0,0,.34);
}
.gx-crop-box header { display: flex; flex-direction: column; gap: 4px; }
.gx-crop-box header strong { font-size: 15px; }
.gx-crop-box header span { font-size: 12.5px; line-height: 1.45; color: var(--gxr-muted); }
.gx-crop-stage {
  position: relative; overflow: hidden; min-height: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--gxr-surface-2); border: 1px solid var(--gxr-border); border-radius: 10px;
  cursor: crosshair; user-select: none;
}
.gx-crop-stage img { display: block; max-width: 100%; max-height: 62vh; pointer-events: none; }
.gx-crop-sel {
  position: absolute; pointer-events: none;
  border: 2px solid var(--gxr-accent);
  box-shadow: 0 0 0 9999px rgba(15, 18, 20, .42);
  border-radius: 2px;
}
.gx-crop-sel[hidden] { display: none; }
.gx-crop-box footer { display: flex; justify-content: flex-end; gap: 8px; }
.gx-crop-box footer button {
  border: 1px solid var(--gxr-border-strong); background: var(--gxr-surface);
  color: var(--gxr-ink); border-radius: 10px; padding: 9px 14px;
  font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer;
}
.gx-crop-box footer button:hover { background: var(--gxr-surface-2); }
.gx-crop-box footer button.is-primary {
  background: var(--gxr-ink); border-color: var(--gxr-ink); color: #fff;
}
.gx-crop-box footer button.is-quiet { border-color: transparent; color: var(--gxr-muted); }
.gx-crop-box footer button:disabled { opacity: .45; cursor: not-allowed; }

/* B5's site-plan bar — the same row B4 carries on its schedule. */
.gx-siteplan-bar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 0 0 14px; padding: 10px 14px;
  border: 1px solid var(--gxr-border); border-radius: 10px;
  background: var(--gxr-surface); color: var(--gxr-muted);
  font-size: 12.5px; line-height: 1.45;
}
.gx-siteplan-bar[hidden] { display: none; }
.gx-siteplan-bar > span { flex: 1 1 260px; min-width: 0; }
.gx-siteplan-bar strong { color: var(--gxr-ink); font-weight: 600; }
.gx-siteplan-bar button { flex: 0 0 auto; }

/* ══ The chat beside the Word file (report-word-chat.js) ══════════════════ */
/* Plan and Guidance, at the top of the chat, in the report's segmented style. */
.gx-report-word-chat-tools {
  float: right; display: inline-flex; gap: 2px; padding: 2px; margin: -4px 0 6px 10px;
  background: var(--gxr-track); border: 1px solid var(--gxr-border); border-radius: 8px;
}
.gx-report-word-chat-tools button {
  border: 1px solid transparent; background: transparent; color: var(--gxr-muted);
  border-radius: var(--gxr-r-btn); padding: 4px 12px; font: 500 12px/16px var(--gxr-font);
  cursor: pointer; white-space: nowrap;
}
.gx-report-word-chat-tools button:hover:not(:disabled) { color: var(--gxr-ink); background: var(--gxr-surface); border-color: var(--gxr-border); }
.gx-report-word-chat-tools button:disabled { opacity: .4; cursor: not-allowed; }
.gx-report-word-chat-tools button:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--gxr-focus); }

/* A pin or guidance opened from the Word view: three columns (owner, 17 Sep
   2026) — the Word report stays on screen and editable on the left, the chat
   in the middle, and ONE viewer on the right that switches between the plan
   and the guidance. Report 40%, chat 25%, viewer 35%. On a narrower screen
   the report gives way first; the chat never drops below a readable width. */
@media (min-width: 701px) {
  body.gx-report-active.gx-word-chat-active { --gf-source-w: 35vw; }
  body.gx-report-active.gx-word-chat-active.gf-plan-pane-open .chat-plan-panel.open { width: 35vw; right: 0; }
  body.gx-report-active.gx-word-chat-active.gf-plan-pane-open .gx-report-screen,
  body.gx-report-active.gx-word-chat-active.gf-source-open .gx-report-screen { right: 35vw; }
  body.gx-report-active.gx-word-chat-active.gf-plan-pane-open .gx-report-main.is-word .gx-report-word,
  body.gx-report-active.gx-word-chat-active.gf-source-open .gx-report-main.is-word .gx-report-word {
    grid-template-columns: minmax(0, 1.6fr) minmax(300px, 1fr);
  }
}
}

/* ── The chat beside the report: dragged to any width (owner, 15 Oct 2026) ── */
.gx-report-word-chat { position: relative; }
.gx-report-chat-resize {
  position: absolute; top: 0; bottom: 0; left: -4px; width: 8px; z-index: 5;
  cursor: col-resize; touch-action: none;
}
.gx-report-chat-resize::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: 3px; width: 2px;
  background: transparent; transition: background .15s;
}
.gx-report-chat-resize:hover::after,
.gx-report-chat-resize:focus-visible::after,
body.gx-chat-resizing .gx-report-chat-resize::after { background: var(--gxr-accent, #2f9c58); }
.gx-report-chat-resize:focus-visible { outline: none; }
body.gx-chat-resizing { cursor: col-resize; user-select: none; }
body.gx-chat-resizing iframe { pointer-events: none; }

/* ── "Add to edit": the pill beside selected report text ── */
.gx-add-to-edit {
  position: fixed; z-index: 9500;  /* above the report screen (8800) */
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 11px; border-radius: 999px;
  border: 1px solid var(--gxr-accent, #2f9c58);
  background: var(--gxr-surface, #fff); color: var(--gxr-accent-ink, #2f9c58);
  font: 600 12.5px var(--gxr-font, Inter, sans-serif);
  box-shadow: 0 4px 14px rgba(15, 23, 42, .14); cursor: pointer;
}
.gx-add-to-edit[hidden] { display: none; }
.gx-add-to-edit svg { width: 14px; height: 14px; }
.gx-add-to-edit:hover { background: var(--gxr-tint, rgba(99,199,106,.10)); }

/* The selected passage waiting in the composer. */
.gx-report-word-quote {
  position: relative; margin: 0 0 8px; padding: 8px 32px 8px 11px;
  border-left: 3px solid var(--gxr-accent, #2f9c58); border-radius: 6px;
  background: var(--gxr-tint, rgba(99,199,106,.10));
  font-size: 12.5px; line-height: 1.45; color: var(--gxr-ink, #1a1d20);
}
.gx-report-word-quote[hidden] { display: none; }
.gx-report-word-quote-label { display: block; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--gxr-accent-ink, #2f9c58); margin-bottom: 3px; }
.gx-report-word-quote-text { display: block; max-height: 4.4em; overflow: hidden; }
.gx-report-word-quote-remove {
  position: absolute; top: 6px; right: 6px; width: 22px; height: 22px;
  border: 0; border-radius: 50%; background: transparent; color: var(--gxr-muted, #6b7280);
  font-size: 16px; line-height: 1; cursor: pointer;
}
.gx-report-word-quote-remove:hover { background: rgba(0,0,0,.06); color: var(--gxr-ink, #1a1d20); }

/* The passage on the engineer's own message. */
.gx-word-quote {
  margin: 0 0 8px; padding: 6px 10px; border-left: 3px solid currentColor; border-radius: 4px;
  background: rgba(0,0,0,.05); font-size: 12.5px; line-height: 1.45; opacity: .9;
}
.gx-word-quote-where { display: block; font-size: 11px; font-weight: 700; margin-bottom: 2px; }
.gx-word-quote-text { display: block; white-space: pre-wrap; }

/* The suggested wording, and what else must change, in grey. */
.gx-word-edit { margin-top: 12px; display: flex; flex-direction: column; gap: 10px; }
.gx-word-edit-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12.5px; color: var(--gxr-ink, #1a1d20); }
.gx-word-edit-text {
  white-space: pre-wrap; padding: 10px 12px; border-radius: 8px;
  border: 1px solid var(--gxr-accent, #2f9c58); background: var(--gxr-surface, #fff);
  font-size: 13.5px; line-height: 1.55; color: var(--gxr-ink, #1a1d20);
}
.gx-word-edit-copy {
  flex: none; border: 1px solid var(--gxr-border-strong, #d1d5db); border-radius: 6px;
  background: var(--gxr-surface, #fff); color: var(--gxr-ink, #1a1d20);
  font: 500 12px var(--gxr-font, Inter, sans-serif); padding: 4px 10px; cursor: pointer;
}
.gx-word-edit-copy:hover { background: var(--gxr-hover, #edf0ee); }
.gx-word-edit-also {
  padding: 10px 12px; border-radius: 8px; background: #f3f4f6; border: 1px solid #e5e7eb;
  color: #6b7280; font-size: 12.5px; line-height: 1.5;
}
.gx-word-edit-also-title { font-weight: 700; margin-bottom: 6px; color: #4b5563; }
.gx-word-edit-also-item + .gx-word-edit-also-item { border-top: 1px solid #e5e7eb; margin-top: 8px; padding-top: 8px; }
.gx-word-edit-also-where { font-size: 11px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: #6b7280; }
.gx-word-edit-also-now { text-decoration: line-through; text-decoration-color: rgba(107,114,128,.5); margin: 3px 0; }
.gx-word-edit-also-row { display: flex; align-items: flex-start; gap: 8px; }
.gx-word-edit-also-next { flex: 1; color: #374151; }
.gx-word-edit-also-next mark { background: rgba(250, 204, 21, .35); color: inherit; border-radius: 2px; padding: 0 1px; }