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

/* Template name becomes the bottom-of-rail affordance (Stitch's gear slot).
   JS now also sets title = 'Template: <name>'. */
.gx-report-template-summary {
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid var(--gxr-border);
  color: var(--gxr-muted);
  font-size: 11px;
  overflow-wrap: anywhere;
}
.gx-report-toc:has(.gx-report-section-step) .gx-report-template-summary {
  margin-top: auto;
  padding: 0;
  border-top: 0;
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--gxr-r-ctl);
  font-size: 0;
  color: var(--gxr-muted);
  cursor: help;
}
.gx-report-toc:has(.gx-report-section-step) .gx-report-template-summary::before {
  content: '\2699';
  font-size: 16px;
  line-height: 1;
}
.gx-report-toc:has(.gx-report-section-step) .gx-report-template-summary:hover {
  background: var(--gxr-hover);
  color: var(--gxr-ink);
}

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

/* FRAEW evidence is a report-local drawer, never a block above F1. */
.gx-fraew-evidence{position:fixed;z-index:8900;top:76px;right:18px;width:min(430px,calc(100vw - 36px));max-height:calc(100vh - 94px);overflow:auto;padding:20px 22px;display:grid;gap:12px;background:#fff;border:1px solid var(--gxr-border);border-radius:12px;box-shadow:0 18px 50px rgba(0,0,0,.2)}.gx-fraew-evidence[hidden]{display:none}.gx-fraew-evidence header{display:flex;justify-content:space-between;gap:14px}.gx-fraew-evidence header h2{margin:3px 0 0;font-size:19px}.gx-fraew-evidence header span{font-size:11px;letter-spacing:.1em;text-transform:uppercase}.gx-fraew-evidence header button{border:0;background:transparent;font-size:23px;cursor:pointer}.gx-fraew-evidence p{margin:0;line-height:1.45;color:var(--gxr-muted)}.gx-fraew-evidence-upload{padding:13px 15px;border:1px dashed var(--gxr-accent);border-radius:8px;background:var(--gxr-page);cursor:pointer}.gx-fraew-evidence-upload strong,.gx-fraew-evidence-upload span{display:block}.gx-fraew-evidence-upload span{margin-top:4px;font-size:12px;color:var(--gxr-muted)}.gx-fraew-evidence-upload input{display:block;margin-top:10px}.gx-fraew-evidence-status{font-size:13px}.gx-fraew-evidence-status ul{margin:6px 0;padding-left:18px}.gx-fraew-evidence-status .is-ready{color:#17654e}.gx-fraew-evidence-status .is-failed{color:#9a302c}

/* ══ 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);
}
.gx-report-main.is-interviewing .gx-report-messages {
  flex: 1; min-height: 160px; height: auto;
  padding: 24px; scrollbar-gutter: stable;
}
.gx-report-main.is-interviewing .gx-report-composer {
  flex: 0 0 auto; padding: 20px 24px;
}

.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;
}

/* The two mirrored squared corners are Stitch's speech-direction cue and
   must stay paired: user squares top-RIGHT, assistant squares top-LEFT. */
.gx-report-message {
  max-width: 78%;
  margin: 0;
  padding: 16px 20px;
  border: 1px solid var(--gxr-border);
  border-radius: var(--gxr-r-card);
  box-shadow: var(--gxr-shadow-sm);
  font-size: 14px;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
/* The WHO-SAID-IT label — "GUIDEX" / "YOU" — which the renderer emits as the
   bubble's first child.

   `> strong:first-child` and not `strong`. Guidex writes bold INSIDE its
   sentences, and the unscoped rule caught every one of them: "You have
   confirmed **simultaneous evacuation**." came out as three blocks, with the
   bold phrase on its own line in small uppercase grey. The label is one
   specific element in one specific position, so the selector says that. */
.gx-report-message > strong:first-child {
  display: block;
  font-family: var(--gxr-font-display);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--gxr-muted);
  margin-bottom: 8px;
}
/* Assistant: Stitch's white card. Deliberately the one place the report
   diverges from the ordinary chat's bubble-less assistant, because the
   report transcript is a record that gets read back, not a live stream. */
.gx-report-message.is-assistant {
  position: relative;
  margin-left: 44px;          /* room for the avatar in the gutter */
  background: var(--gxr-surface);
  color: var(--gxr-ink-soft);
  border-radius: 2px var(--gxr-r-card) var(--gxr-r-card) var(--gxr-r-card);
  line-height: 1.625;
}
/* The >_ avatar, as in the Stitch screen. Drawn rather than added to the DOM,
   because renderMarkdown owns the inside of this element and would wipe it. */
.gx-report-message.is-assistant::before {
  content: '>_';
  position: absolute;
  left: -44px;
  top: 0;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--gxr-tint);
  color: var(--gxr-accent-ink);
  font: 700 11px var(--gxr-font-display);
  letter-spacing: -.02em;
}
@media (max-width: 700px) {
  .gx-report-message.is-assistant { margin-left: 0; }
  .gx-report-message.is-assistant::before { display: none; }
}
/* User: the chat's own bubble hex and stroke, right-aligned as Stitch has it
   and as this screen already did. */
.gx-report-message.is-user {
  margin-left: auto;
  background: var(--gxr-bubble-user);
  border-color: var(--gxr-border-strong);
  color: var(--gxr-ink);
  border-radius: var(--gxr-r-card) 2px var(--gxr-r-card) var(--gxr-r-card);
}
.gx-report-message.is-pending { opacity: .88; }

.gx-report-message.is-thinking > div { display: flex; align-items: center; gap: 5px; }
.gx-report-message.is-thinking > div span {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--gxr-brand);
  box-shadow: 0 0 0 3px rgba(99,199,106,.16);
  animation: gxThinking 1.1s infinite ease-in-out;
}
.gx-report-message.is-thinking > div span:nth-child(2) { animation-delay: .15s; }
.gx-report-message.is-thinking > div span:nth-child(3) { animation-delay: .3s; }
.gx-report-message.is-thinking em {
  margin-left: 6px; color: var(--gxr-muted); font-size: 12px; font-style: normal;
}
@media (prefers-reduced-motion: reduce) {
  .gx-report-message.is-thinking > div span { animation: none; opacity: 1; }
}

/* Markdown reset — white-space:normal is load-bearing. */
.gx-report-message.is-assistant{white-space:normal}   /* minified: asserted verbatim by test-report-assistant.js */
/* Spacing here is NOT the 8px layout scale. This is running prose inside one
   bubble — the gaps have to separate sentences, not panels. Putting the layout
   rhythm on <li> gave every bullet 16px top AND bottom, so a four-point list
   read as four disconnected paragraphs. Paragraph gap > list gap > item gap,
   and each one only just big enough to do its job. */
.gx-report-message.is-assistant p { margin: 0 0 12px; }
.gx-report-message.is-assistant p:last-child { margin-bottom: 0; }
.gx-report-message.is-assistant ul,
.gx-report-message.is-assistant ol {
  margin: 10px 0;
  /* Room for a two-digit marker without it hanging outside the bubble. */
  padding-left: 22px;
}
.gx-report-message.is-assistant li { margin: 5px 0; }
/* A nested list belongs to the line above it, so it sits tighter still. */
.gx-report-message.is-assistant li > ul,
.gx-report-message.is-assistant li > ol { margin: 5px 0 5px; }
.gx-report-message.is-assistant li > p { margin: 0; }
.gx-report-message.is-assistant li::marker { color: var(--gxr-muted); }
.gx-report-message.is-assistant li > p + p { margin-top: 8px; }

/* Guidex writes "### Horizontal means of escape" to head a topic. These are
   labels inside a bubble, not page headings, so they stay small and are told
   apart by weight and letter-spacing rather than size — the design's own rule.
   The top margin is bigger than the bottom one so a heading binds to the text
   BELOW it instead of floating between two blocks. */
.gx-report-message.is-assistant h1,
.gx-report-message.is-assistant h2,
.gx-report-message.is-assistant h3,
.gx-report-message.is-assistant h4 {
  font-family: var(--gxr-font-display);
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--gxr-ink);
  margin: 18px 0 6px;
}
.gx-report-message.is-assistant > :first-child { margin-top: 0; }
.gx-report-message.is-assistant > :last-child { margin-bottom: 0; }
.gx-report-message.is-assistant strong { font-weight: 600; color: var(--gxr-ink); }
.gx-report-message.is-assistant hr {
  border: 0; border-top: 1px solid var(--gxr-border); margin: 16px 0;
}
.gx-report-message.is-assistant blockquote {
  margin: 12px 0; padding: 2px 0 2px 12px;
  border-left: 2px solid var(--gxr-border-strong);
  color: var(--gxr-muted);
}

.gx-report-message.is-assistant table {
  border-collapse: collapse; margin: 12px 0; font-size: 12.5px;
  display: block; overflow-x: auto;
}
.gx-report-message.is-assistant th,
.gx-report-message.is-assistant td {
  border: 1px solid var(--gxr-border); padding: 6px 9px; text-align: left;
  vertical-align: top;
}
.gx-report-message.is-assistant th {
  background: var(--gxr-surface-2); font-weight: 600; white-space: nowrap;
}
.gx-report-message.is-assistant code {
  background: rgba(0,0,0,.06); padding: 1px 4px; border-radius: 3px; font-size: 12px;
}
.gx-report-message.is-assistant pre { overflow-x: auto; }

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

/* Shared by the intake textareas and the composer. Padding is load-bearing:
   autoGrowComposer measures scrollHeight against the 200px cap. */
.gx-report-intake textarea,
.gx-report-composer 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,
.gx-report-composer textarea::placeholder { color: var(--gxr-muted-2); }
.gx-report-intake textarea:focus,
.gx-report-composer 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}

/* Stitch puts the send control INSIDE the text box, bottom right. That is a
   pure CSS move — the form keeps its two children in their existing order, so
   the tab order and the submit button are untouched, and the textarea simply
   reserves a gutter for the button to sit in. */
.gx-report-composer {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: end;
  gap: 12px;
  border-top: 1px solid var(--gxr-border);
  background: var(--gxr-canvas);
  padding: 20px 24px;
}
.gx-report-composer textarea { padding-right: 92px; }
.gx-report-composer button {
  position: absolute;
  right: 34px;
  bottom: 30px;
}
/* No attach button: the ordinary chat deliberately has none, and inventing
   one here would make the report foreign in the opposite direction. */

/* Primary buttons follow the APP convention — ink at rest, green on hover.
   Send is the one exception, below: it is green at rest in the Stitch design,
   it is the only green-filled control on that screen, and it is what tells a
   user mid-sentence where the conversation continues. Geometry is Stitch's. */
.gx-report-intake form > button,
.gx-report-composer 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-composer 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-composer 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-composer 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-composer button:disabled,
.gx-report-generate-btn:disabled { opacity: .5; }

/* Send: green at rest, as in the Stitch screen. The brand green is light
   enough that white type on it fails contrast, so the fill is --gxr-accent
   (#2f9c58, 4.6:1 against white) and --gxr-brand is left for marks and tints. */
.gx-report-composer button { background: var(--gxr-accent); }
.gx-report-composer button:hover:not(:disabled) { background: var(--gxr-accent-deep); }
.gx-report-composer button:active:not(:disabled) { background: var(--gxr-accent-deep); }

@media (max-width: 700px) {
  /* On a phone the button goes back BELOW the box: overlaying it costs the
     thumb its target and eats a third of a narrow line of text. */
  .gx-report-composer { grid-template-columns: 1fr; }
  .gx-report-composer textarea { padding-right: 12px; }
  .gx-report-composer button { position: static; justify-self: end; }
}

/* ══ 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 panel, empty and working cards, spinner ══ */
.gx-report-ready-review {
  flex: 0 1 auto;
  max-height: 44%;
  overflow: auto;
  margin: 0 24px 4px;
  border: 1px solid var(--gxr-accent);
  border-radius: var(--gxr-r-card);
  background: var(--gxr-tint);
  padding: 16px 18px;
}
.gx-report-ready-head {
  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);
}
.gx-report-ready-head button {
  border: 0; background: transparent;
  color: var(--gxr-accent-ink); text-decoration: underline; cursor: pointer;
}
.gx-report-ready-values {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 20px; margin: 14px 0;
}
.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-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%; }

.gx-report-section-loading {
  background: var(--gxr-surface);
  border: 1px solid var(--gxr-border);
  border-top: 0;
  padding: 80px 30px;
  text-align: center;
}
.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; }

.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;
  font-size: 14.5px;
  color: var(--gxr-ink-soft);
  print-color-adjust: exact;
  -webkit-print-color-adjust: exact;
}
.gx-report-paper h1 {
  font-family: var(--gxr-font-display);
  font-size: 32px; font-weight: 700; color: var(--gxr-ink); margin: 0 0 30px;
}
.gx-report-paper h2 {
  font-family: var(--gxr-font-display);
  font-size: 23px; font-weight: 700; color: var(--gxr-ink);
  margin: 38px 0 14px;
  border-bottom: 1px solid var(--gxr-border); padding-bottom: 8px;
}
.gx-report-paper h3 {
  font-family: var(--gxr-font-display);
  font-size: 18px; font-weight: 600; 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-tint); color: 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; }
.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;
}
.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;
}

.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; }
  .gx-report-actions button:first-child { display: none; }
  .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; }
/* .cta-assess declares display:inline-flex in the global chrome. Without this
   explicit guard, a report action with hidden=true still renders in Chat. */
.gx-report-entry[hidden] { display: none !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. */
body.gx-report-opening #app { display: none !important; }
body.gx-report-opening .gf-projects-landing { 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;
}

/* 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-message,
  body.gx-report-active.gf-source-open   .gx-report-message { 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; }
}

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

/* Finished-report discussion stays beside the editable document instead of
   sending an engineer back to the generic project chat. */
.gx-report-document-chat {
  position: fixed;
  z-index: 120;
  right: 20px;
  bottom: 20px;
  width: min(460px, calc(100vw - 40px));
  max-height: min(720px, calc(100vh - 110px));
  display: flex;
  flex-direction: column;
  background: var(--gxr-surface);
  border: 1px solid var(--gxr-border);
  border-radius: 12px;
  box-shadow: 0 18px 50px rgba(0,0,0,.18);
  overflow: hidden;
  resize: both;
  min-width: 320px;
  min-height: 280px;
}
.gx-report-document-chat[hidden] { display: none; }
.gx-report-document-chat > header { display:flex; align-items:center; justify-content:space-between; padding:16px 18px 8px; }
.gx-report-document-chat h2 { margin:2px 0 0; font-size:18px; }
.gx-report-document-chat header span { font-size:11px; letter-spacing:.12em; text-transform:uppercase; }
.gx-report-document-chat > p { margin:0; padding:0 18px 12px; font-size:13px; color:var(--gxr-muted); }
.gx-report-document-messages { overflow:auto; min-height:160px; padding:0 18px 12px; display:flex; flex-direction:column; gap:10px; }
.gx-report-document-message { padding:10px 12px; border-radius:8px; white-space:pre-wrap; line-height:1.45; }
.gx-report-document-message.is-user { align-self:flex-end; background:var(--gxr-accent-soft); }
.gx-report-document-message.is-assistant { background:var(--gxr-page); border:1px solid var(--gxr-border); }
#gxReportDocumentComposer { display:flex; gap:8px; padding:12px 18px 18px; border-top:1px solid var(--gxr-border); }
#gxReportDocumentMessage { flex:1; resize:vertical; min-height:44px; }
/* Stay clear of whichever evidence viewer the engineer has opened. */
body.gx-report-active.gf-plan-pane-open .gx-report-document-chat,
body.gx-report-active.gf-source-open .gx-report-document-chat { right: min(52vw, 720px); }
@media (max-width: 900px) {
  body.gx-report-active.gf-plan-pane-open .gx-report-document-chat,
  body.gx-report-active.gf-source-open .gx-report-document-chat { right: 12px; bottom: 12px; }
}

@media (max-width: 700px) {
  /* On a narrow screen .gx-report-actions button:first-child is hidden to make
     room. "View report" is that first child, and it is the only way back from
     the progress preview — so when it is live it must come back. */
  .gx-report-actions #gxReportPreviewBtn:not([hidden]) { display: inline-block; }
}