/* b4-schedule.css — Fire Strategy mode, B4 elevation schedule.
   A spreadsheet inside a conversation, so it is deliberately plainer than the
   rest of the report screen: dense, editable, and readable at a glance.

   Colours come from the --gxr-* block in report-assistant.css. Amber stays
   amber here: it is the only mark separating a figure the engineer typed by
   hand from one the BRE 187 tables produced. */

.gx-b4-panel {
  background: var(--gxr-surface, #fff);
  border: 1px solid var(--gxr-border, #e5e7eb);
  border-top: 0;
  padding: 22px 28px 26px;
}
.gx-b4-panel[hidden] { display: none; }

/* ── method choice ───────────────────────────────────────────────────────── */
.gx-b4-method h2 { font-size: 19px; margin: 0 0 5px; }
.gx-b4-method > p { color: var(--gxr-muted, #6b7280); margin: 0 0 18px; font-size: 13px; }
.gx-b4-method-choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.gx-b4-method-choice {
  display: block;
  text-align: left;
  border: 1px solid var(--gxr-border, #e5e7eb);
  border-radius: 11px;
  background: var(--gxr-surface-2, #f2f4f3);
  padding: 16px 18px;
  cursor: pointer;
  transition: border-color .12s, background .12s, box-shadow .12s;
}
.gx-b4-method-choice:hover {
  border-color: var(--gxr-accent, #2f9c58);
  background: var(--gxr-tint, rgba(99,199,106,.10));
  box-shadow: 0 3px 12px rgba(26,29,32,.06);
}
.gx-b4-method-choice strong { display: block; font-size: 15px; color: var(--gxr-ink, #1a1d20); margin-bottom: 6px; }
.gx-b4-method-choice span { display: block; font-size: 12.5px; line-height: 1.5; color: var(--gxr-ink-soft, #374151); }

/* ── schedule chrome ─────────────────────────────────────────────────────── */
.gx-b4-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.gx-b4-head strong { font-size: 15px; color: var(--gxr-ink, #1a1d20); }
.gx-b4-head span { color: var(--gxr-muted, #6b7280); font-size: 13px; }
.gx-b4-head-tools { display: flex; align-items: center; gap: 8px; }
.gx-b4-btn {
  border: 1px solid var(--gxr-ink, #1a1d20);
  background: var(--gxr-ink, #1a1d20);
  color: #fff;
  border-radius: var(--gxr-r-btn, 6px);
  padding: 7px 13px; font: 600 12px Inter, sans-serif; cursor: pointer;
}
.gx-b4-btn:hover { background: var(--gxr-accent, #2f9c58); border-color: var(--gxr-accent, #2f9c58); }
.gx-b4-btn.is-quiet {
  background: transparent;
  color: var(--gxr-ink-soft, #374151);
  border-color: var(--gxr-border, #e5e7eb);
}
.gx-b4-btn.is-quiet:hover { background: var(--gxr-hover, #edf0ee); color: var(--gxr-ink, #1a1d20); }
.gx-b4-status { font-size: 11.5px; color: var(--gxr-muted, #6b7280); min-width: 52px; text-align: right; }
.gx-b4-status.is-error { color: var(--gxr-danger, #d44d4d); font-weight: 600; }

/* ── tables ──────────────────────────────────────────────────────────────── */
.gx-b4-table-wrap { margin: 0 0 20px; overflow-x: auto; }
.gx-b4-table-wrap figcaption {
  font: 600 12px Inter, sans-serif; color: var(--gxr-accent-ink, #2f9c58);
  text-transform: uppercase; letter-spacing: .07em; margin-bottom: 7px;
}
.gx-b4-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.gx-b4-table th {
  text-align: left; font-weight: 600; color: var(--gxr-ink-soft, #374151);
  background: var(--gxr-surface-2, #f2f4f3);
  border: 1px solid var(--gxr-border, #e5e7eb);
  padding: 7px 9px; white-space: nowrap;
}
.gx-b4-table td { border: 1px solid var(--gxr-border, #e5e7eb); padding: 5px 7px; vertical-align: middle; }
.gx-b4-table tr:hover td { background: var(--gxr-hover, #edf0ee); }

.gx-b4-input {
  width: 100%; min-width: 78px; box-sizing: border-box;
  border: 1px solid transparent; border-radius: 5px; background: transparent;
  padding: 6px 7px; font: 12.5px Inter, sans-serif; color: var(--gxr-ink, #1a1d20);
}
.gx-b4-input:hover { border-color: var(--gxr-border, #e5e7eb); }
.gx-b4-input:focus {
  border-color: var(--gxr-accent, #2f9c58);
  background: var(--gxr-surface, #fff);
  outline: none;
  box-shadow: 0 0 0 3px var(--gxr-focus, rgba(99,199,106,.09));
}
.gx-b4-input.is-number { min-width: 62px; text-align: right; font-variant-numeric: tabular-nums; }
select.gx-b4-input { min-width: 140px; }

.gx-b4-pair { display: flex; align-items: center; gap: 4px; }
.gx-b4-pair span { color: var(--gxr-muted-2, #9ca3af); font-size: 11px; }
.gx-b4-hint { display: block; color: var(--gxr-muted-2, #9ca3af); font-size: 10px; margin-top: 2px; }
.gx-b4-fixed { color: var(--gxr-ink-soft, #374151); font-weight: 600; white-space: nowrap; }

/* Calculated cells: the figure, what it overrode, and a way to change it. */
.gx-b4-calc { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.gx-b4-value { font-weight: 700; color: var(--gxr-accent-ink, #2f9c58); font-variant-numeric: tabular-nums; cursor: help; }
/* Amber is the ONLY signal that a hand-entered figure replaced a calculated
   one. It must never go green with the rest of the sheet. */
.gx-b4-value.is-overridden { color: var(--gxr-amber, #7b5b0c); }
.gx-b4-was { color: var(--gxr-muted-2, #9ca3af); font-size: 10.5px; white-space: nowrap; }
.gx-b4-override {
  border: 0; background: transparent; color: var(--gxr-muted, #6b7280);
  font: 10.5px Inter, sans-serif; text-decoration: underline; cursor: pointer; padding: 0;
}
.gx-b4-override:hover { color: var(--gxr-ink, #1a1d20); }

.gx-b4-note-row td {
  background: var(--gxr-amber-bg, #fff7df);
  color: var(--gxr-amber, #7b5b0c);
  font-size: 11.5px; padding: 6px 9px;
}

.gx-b4-remove {
  border: 0; background: transparent; color: var(--gxr-muted-2, #9ca3af);
  font-size: 16px; line-height: 1; cursor: pointer; padding: 2px 6px;
}
.gx-b4-remove:hover { color: var(--gxr-danger, #d44d4d); }

.gx-b4-add {
  border: 1px dashed var(--gxr-border-strong, #d1d5db); background: transparent;
  color: var(--gxr-ink-soft, #374151);
  border-radius: 8px; padding: 9px 14px; font: 600 12px Inter, sans-serif; cursor: pointer;
}
.gx-b4-add:hover {
  border-color: var(--gxr-accent, #2f9c58);
  color: var(--gxr-accent-ink, #2f9c58);
  background: var(--gxr-tint, rgba(99,199,106,.10));
}

@media (max-width: 700px) {
  .gx-b4-panel { padding: 16px 14px 20px; }
  .gx-b4-head-tools { width: 100%; justify-content: flex-start; }
}

/* ── B4 in two parts (owner, 16 Sep 2026) ────────────────────────────────── */
/* Part 1: the schedule fills the screen, with nothing else to do. */
.gx-b4-panel.is-part-one { flex: 1; min-height: 0; overflow: auto; border-bottom: 0; }
.gx-b4-part-head { margin-bottom: 18px; }
.gx-b4-part-head > span {
  font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--gxr-muted, #6b7280); font-weight: 600;
}
.gx-b4-part-head h2 { margin: 3px 0 6px; font-size: 20px; color: var(--gxr-ink, #1a1d20); }
.gx-b4-part-head > p { margin: 0; font-size: 13px; line-height: 1.5; color: var(--gxr-muted, #6b7280); max-width: 70ch; }
/* The site-plan row on the schedule. It had no rule of its own at all: the
   name ran straight into "Open it" and the next table caption sat flush under
   the buttons. It is the same offer as B5's bar, so it is the same bar
   (.gx-siteplan-bar in report-assistant.css) — owner, 17 Sep 2026. */
.gx-b4-siteplan {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 0 0 14px; padding: 10px 14px;
  border: 1px solid var(--gxr-border, #e5e7eb); border-radius: 10px;
  background: var(--gxr-surface, #fff); color: var(--gxr-muted, #6b7280);
  font-size: 12.5px; line-height: 1.45;
}
.gx-b4-siteplan > span { flex: 1 1 260px; min-width: 0; }
.gx-b4-siteplan strong { color: var(--gxr-ink, #1a1d20); font-weight: 600; }
.gx-b4-siteplan button { flex: 0 0 auto; }

.gx-b4-siteplan-ask {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-top: 14px; padding: 12px 14px;
  border: 1px solid var(--gxr-warn-border, #f0d9a8); border-radius: 10px;
  background: var(--gxr-warn-bg, #fdf6e7);
}
.gx-b4-siteplan-ask strong { font-size: 13.5px; color: var(--gxr-ink, #1a1d20); }
.gx-b4-siteplan-ask span { flex: 1 1 320px; font-size: 12.5px; line-height: 1.5; color: var(--gxr-ink-soft, #374151); }
.gx-b4-siteplan-has { margin: 12px 0 0; font-size: 12.5px; color: var(--gxr-muted, #6b7280); }
.gx-b4-part-foot {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; flex-wrap: wrap;
  margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--gxr-border, #e5e7eb);
}
.gx-b4-missing { margin: 0; padding: 0; list-style: none; font-size: 12.5px; color: var(--gxr-ink-soft, #374151); }
.gx-b4-missing li { margin: 2px 0; }
.gx-b4-missing li.is-head { font-weight: 600; color: var(--gxr-ink, #1a1d20); margin-bottom: 6px; }
.gx-b4-part-foot .gx-report-generate-btn { margin-left: auto; }

/* Part 2: the schedule stays above the chat, and folds away. */
/* A clear button, not a quiet line (owner, 15 Oct 2026). */
.gx-b4-fold {
  display: flex; align-items: center; gap: 12px; width: 100%;
  margin: 0 0 12px; padding: 10px 14px;
  border: 1px solid var(--gxr-border-strong, #d1d5db); border-radius: var(--gxr-r-ctl, 12px);
  background: var(--gxr-surface, #fff);
  font: inherit; text-align: left; cursor: pointer; color: var(--gxr-ink, #1a1d20);
  transition: border-color .16s, background .16s, box-shadow .16s;
}
.gx-b4-fold:hover { border-color: var(--gxr-accent, #2f9c58); background: var(--gxr-tint, rgba(99,199,106,.10)); }
.gx-b4-fold:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--gxr-focus, rgba(99,199,106,.25)); }
.gx-b4-fold-icon {
  flex: none; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 8px;
  background: var(--gxr-tint, rgba(99,199,106,.10)); color: var(--gxr-accent-ink, #2f9c58);
}
.gx-b4-fold-icon svg { width: 15px; height: 15px; }
.gx-b4-fold-text { flex: 1; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.gx-b4-fold-note { color: var(--gxr-muted, #6b7280); font-size: 12.5px; }
.gx-b4-fold-action {
  flex: none; display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; font-weight: 600; color: var(--gxr-accent-ink, #2f9c58);
}
.gx-b4-fold-mark { font-size: 11px; }
.gx-b4-panel.is-folded { padding-bottom: 10px; }
.gx-b4-panel:not(.is-part-one) { max-height: 46vh; overflow: auto; }
.gx-b4-panel.is-folded:not(.is-part-one) { max-height: none; overflow: visible; }