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