.building-data-card {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  padding: 1.25rem;
  align-items: center;
}
.building-data-shape {
  flex-shrink: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.building-data-shape-wrap {
  position: relative;
  /* Fluid by default -- fills available width up to whatever max-width/aspect-ratio the
     inline style sets (renderBuildingData), or is pinned to an exact size by an inline
     width/height instead (renderFloorPlanHazards's own use of this same class).
     height: auto (not a fixed value) is what actually lets that inline aspect-ratio work
     -- aspect-ratio only computes a dimension that's otherwise auto; a fixed height here
     was silently overriding it and capping every wrap at 220px tall regardless of what
     size/extraVerticalSpace said, no matter how either usage tried to set it. */
  width: 100%;
  height: auto;
  /* Safety cap, not a normal case -- an unusually tall/narrow building outline could still
     compute a tall inline pixel height (renderBuildingData); max-height (unlike height) wins
     over that regardless of it being set inline, keeping this card's height in the same
     range as the Hazards map beside it (see .building-data-map-wrap's 12rem). */
  max-height: 12rem;
  flex-shrink: 0;
  /* Moved here from .building-data-shape so the gray background covers the whole wrap,
     not just the SVG's own tight bounds -- matters once the wrap is made taller than the
     SVG (see renderBuildingData's inline height override), so the extra margin above/below
     the outline is gray too, not the card's plain white showing through. */
  background: var(--bg);
  border-radius: var(--radius-md);
  overflow: hidden;
  /* Centers the outline SVG within that taller wrap -- a no-op when wrap and SVG are the
     same size, like they still are in renderFloorPlanHazards's own use of this class. */
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Building Data's own map card (see renderBuildingData) -- read-only hazard/exit markers
   (see placeReadOnlyHazardMarker/placeReadOnlyExitMarker), no chip bar or save button. */
.building-data-map-wrap {
  width: 100%;
  /* Much shorter than the old single-column layout's 20rem -- this card is half the page
     width now (see .building-data-grid), so a tall map made the whole row look cramped and
     square instead of the wide, short proportions the rest of the grid has. */
  height: 12rem;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
/* Address confirmation stage (see showAddressConfirmStage/#addressConfirmStage) -- sits
   between the address search and the wizard for a brand-new address only. Tighter than
   .page-subtitle--center's shared 2.25rem (theme.css) -- scoped to this one ID rather than
   editing that class, since it's a shared style other pages also use. */
#addressConfirmStage .page-subtitle--center { margin-bottom: 1.25rem; }
.address-confirm-card {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  max-width: 46rem;
  margin: 0 auto 1rem;
  padding: 0.75rem 1.25rem;
  background: var(--surface);
  border: 0.0625rem solid var(--border-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  text-align: left;
}
.address-confirm-pin { flex-shrink: 0; font-size: 1.25rem; color: var(--accent); }
.address-confirm-card-text { flex: 1; min-width: 0; }
.address-confirm-street { font-size: 0.9375rem; font-weight: 700; color: var(--text); }
.address-confirm-city { font-size: 0.8125rem; color: var(--text-muted); margin-top: 0.125rem; }
.address-confirm-edit-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem 0.875rem;
  border: 0.0625rem solid var(--border-soft);
  border-radius: 62.4375rem;
  background: var(--surface);
  color: var(--text);
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.address-confirm-edit-btn:hover { background: var(--accent-light); border-color: var(--accent); color: var(--accent); }
.address-confirm-map-wrap {
  width: 100%;
  max-width: 46rem;
  height: 16rem;
  margin: 0 auto 1rem;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  background: var(--bg);
}
.address-confirm-info-box {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  width: 100%;
  max-width: 46rem;
  margin: 0 auto 1.5rem;
  padding: 0.75rem 1.25rem;
  background: var(--info-light, #e0ecff);
  border-radius: var(--radius-lg);
  text-align: left;
}
.address-confirm-info-icon {
  flex-shrink: 0;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: var(--success, #1a9c5e);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 800;
}
.address-confirm-info-title { font-size: 0.875rem; font-weight: 700; color: var(--text); }
.address-confirm-info-text { font-size: 0.8125rem; color: var(--text-muted); margin-top: 0.125rem; line-height: 1.4; }
.address-confirm-actions {
  display: flex;
  justify-content: center;
  gap: 0.75rem;
}
.address-confirm-disclaimer {
  margin: 1.5rem 0 0;
  font-size: 0.71875rem;
  color: var(--text-faint);
}
/* Building Data's floorplan-with-walls card (see renderBuildingData) -- same
   .building-data-shape-wrap the outline picture always used, just with a walls overlay
   (interior_layout, read-only) instead of the old hazard/exit/fire-lane layers. */
.building-data-wall-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.building-data-wall-layer svg { width: 100%; height: 100%; display: block; }
.building-data-wall-line { fill: none; stroke: var(--text); stroke-width: 1.2; stroke-linecap: round; }
/* Wider than the old single-column stack's 56.75rem -- .building-data-grid (below) is two
   columns now, so each card needs real room for its own map+list or picture+status content. */
.building-data-column { max-width: 78rem; margin: 0 auto; }
.meta-value-edit {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  justify-content: flex-end;
}
.meta-edit-btn {
  background: none;
  border: none;
  padding: 0.125rem 0.375rem;
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--accent);
  cursor: pointer;
  border-radius: var(--radius-xs);
}
.meta-edit-btn:hover { background: var(--accent-light); }
.meta-value-input {
  width: 11.25rem;
  padding: 0.25rem 0.5rem;
  font-size: 0.78125rem;
}
.meta-save-btn {
  background: var(--accent);
  color: #fff;
  border: none;
  padding: 0.3125rem 0.625rem;
  border-radius: var(--radius-xs);
  font-size: 0.6875rem;
  font-weight: 600;
  cursor: pointer;
}
.meta-save-btn:hover { background: var(--accent-dark); }
/* Wizard's Hazards step (see renderFloorPlanHazards) -- live map on the left, read-only
   Hazards / Entrances-Exits summary lists stacked on the right (both hazards and exits are
   placed/dragged right on the map itself -- see addHazardMapMarker/addExitMapMarker -- so
   neither list needs its own edit controls). */
.hazards-review-row {
  display: flex;
  justify-content: center;
  /* stretch, not flex-start -- the picture card matches the combined height of the two
     list cards + the gap between them, instead of just being as tall as the picture. */
  align-items: stretch;
  gap: 1.75rem;
  flex-wrap: wrap;
}
.hazards-picture-card {
  padding: 1.5rem;
  flex-shrink: 0;
  box-sizing: border-box;
  /* Centers the picture in the extra height stretch (above) gives this card, instead of
     leaving it pinned to the top. */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.hazards-lists-col {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  /* No fixed width -- sits inside the Hazards section card in the 2x2 grid now (see
     .building-data-grid), so it shares whatever width .hazards-review-row gives it with the
     map beside it, instead of assuming the old single-column layout's full page width. */
  flex: 1;
  min-width: 0;
}
/* flex: 1 so the single Marked Locations card fills the extra height .hazards-lists-col gets
   from stretching to match .hazards-picture-card (see align-items: stretch on
   .hazards-review-row), instead of leaving blank page background below it. */
.hazards-lists-col .hazards-marked-card { flex: 1; }
.hazards-list-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.625rem;
  padding-bottom: 0.625rem;
  border-bottom: 0.0625rem solid var(--border-soft);
}
.hazards-list-title { font-size: 0.9375rem; font-weight: 800; }
.hazards-list-count {
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--text-muted);
  background: var(--bg);
  padding: 0.25rem 0.625rem;
  border-radius: 62.4375rem;
}
.hazards-review-footer {
  max-width: 53rem;
  margin: 0.75rem auto 0;
  padding-top: 0.75rem;
  border-top: 0.0625rem solid var(--border-soft);
}

/* ── Hazards wizard step's "mark a tool, click the map" layout (see renderFloorPlanHazards in
   report-hazards-map.js). Three columns: map | tools to arm | markers placed so far. Distinct
   from .hazards-review-row above, which report-building-data.js's own read-only hazards/exits
   summary still uses on the saved report and Edit History -- don't merge these. ── */
.hazards-mark-layout {
  display: grid;
  grid-template-columns: minmax(18rem, 1.2fr) minmax(13rem, 0.7fr) minmax(11rem, 0.6fr);
  max-width: 75rem;
  margin: 0 auto;
  gap: 1.25rem;
  /* Explicit shared height below (not align-items: stretch) -- CSS Grid sizes an auto row from
     every item's own natural/max-content height *before* stretch ever applies, so a tall,
     unclamped tools list just drove the whole row taller instead of being capped to the map's
     height the way stretch implies. An explicit height sidesteps that -- see
     --hazards-column-height. */
  align-items: stretch;
  --hazards-column-height: 28rem;
}
.hazards-map-card { padding: 1rem; box-sizing: border-box; display: flex; flex-direction: column; }
.hazards-mark-layout .hazards-map-wrap {
  width: 100%;
  height: 26rem;
  max-width: none;
}
/* Shown once a tool is armed (see setArmedTool) -- tells you what happens on the next map
   click, with a way to back out of it without placing anything. */
.hazards-map-status[hidden] { display: none; }
.hazards-map-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: 0.75rem;
  padding: 0.625rem 0.875rem;
  background: var(--accent-light);
  color: var(--accent);
  font-size: 0.8125rem;
  font-weight: 600;
  border-radius: var(--radius-md);
}
.hazards-map-status-close {
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: inherit;
  font-size: 0.9375rem;
  line-height: 1;
  cursor: pointer;
}
.hazards-map-status-close:hover { background: rgba(0, 0, 0, 0.08); }
.hazards-tools-card {
  height: var(--hazards-column-height);
  padding: 1.25rem;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.hazards-tools-title {
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  margin-bottom: 0.875rem;
}
/* flex: 1 + min-height: 0 + overflow-y: auto -- the list itself scrolls within whatever height
   .hazards-tools-card is stretched to (matched to the map card's height, see .hazards-mark-
   layout's align-items: stretch), rather than each individual tool card scrolling its own
   description or the whole card growing past the map. */
.hazards-tools-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}
/* Icon badge + label + radio indicator on one header row, description below spanning the full
   card width. Every card is the same fixed height -- no per-card scrolling, a long description
   just clips at the card's own bottom edge instead (.hazards-tools-list, above, is what scrolls
   when the whole list of cards runs longer than the map's height). */
.hazards-tool-btn {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  width: 100%;
  height: 6.5rem;
  flex-shrink: 0;
  padding: 0.875rem;
  border: 0.0625rem solid var(--border-soft);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--text);
  text-align: left;
  cursor: pointer;
  box-sizing: border-box;
  overflow: hidden;
  transition: background 0.15s var(--ease), border-color 0.15s var(--ease);
}
.hazards-tool-btn:hover { border-color: var(--border); }
.hazards-tool-btn-header {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  flex-shrink: 0;
}
.hazards-tool-btn-icon {
  flex-shrink: 0;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.0625rem;
}
.hazards-tool-btn-label { flex: 1; min-width: 0; font-size: 0.8125rem; font-weight: 700; color: var(--text); }
.hazards-tool-btn-desc {
  display: block;
  font-size: 0.75rem;
  color: var(--text-muted);
  line-height: 1.4;
  overflow: hidden;
}
.hazards-tool-btn-radio {
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  border: 0.0625rem solid var(--border);
  background: var(--surface);
  position: relative;
  transition: background 0.15s var(--ease), border-color 0.15s var(--ease);
}
.hazards-tool-btn--active {
  background: var(--accent-light);
  border-color: var(--accent);
}
.hazards-tool-btn--active .hazards-tool-btn-radio {
  background: var(--accent);
  border-color: var(--accent);
}
.hazards-tool-btn--active .hazards-tool-btn-radio::after {
  content: '';
  position: absolute;
  inset: 0;
  margin: auto;
  width: 0.375rem;
  height: 0.625rem;
  border-right: 0.125rem solid #fff;
  border-bottom: 0.125rem solid #fff;
  transform: translateY(-0.0625rem) rotate(45deg);
}
/* PROTOTYPE -- "does this business have any of these?" pre-screen shown before the Mark on
   Map tools (see renderHazardsPreScreen in report-hazards-map.js). One centered card, same
   pattern as .contacts-card since there's no map above it to left-align with yet. */
.hazards-prescreen-row {
  display: flex;
  justify-content: center;
}
.hazards-prescreen-card {
  width: 100%;
  max-width: 32rem;
  padding: 2rem 1.75rem;
  box-sizing: border-box;
}
.hazards-prescreen-question {
  font-size: 1.125rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  margin-bottom: 1.25rem;
}
.hazards-prescreen-list {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  margin-bottom: 1.5rem;
}
.hazards-prescreen-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  padding: 0.875rem 1rem;
  border: 0.0625rem solid var(--border-soft);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--text);
  font-size: 0.875rem;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s var(--ease), border-color 0.15s var(--ease), color 0.15s var(--ease);
}
.hazards-prescreen-item:hover { background: var(--bg); border-color: var(--border); }
.hazards-prescreen-item-icon { font-size: 1.0625rem; flex-shrink: 0; }
.hazards-prescreen-item-label { flex: 1; min-width: 0; }
.hazards-prescreen-item-toggle {
  flex-shrink: 0;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  border: 0.0625rem solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  color: var(--text-faint);
}
.hazards-prescreen-item--selected {
  background: var(--accent-light);
  border-color: var(--accent);
  color: var(--accent);
}
.hazards-prescreen-item--selected .hazards-prescreen-item-toggle {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.hazards-prescreen-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}
.hazards-marked-card {
  height: var(--hazards-column-height);
  padding: 1.25rem;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.hazards-marked-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
}
.hazards-marked-title { font-size: 0.75rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); }
.hazards-marked-count {
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--text-muted);
  background: var(--bg);
  padding: 0.25rem 0.625rem;
  border-radius: 62.4375rem;
}
.hazards-marked-list {
  list-style: none;
  margin: 0 0 0.875rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  max-height: 16rem;
  overflow-y: auto;
}
.hazards-marked-item {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.5rem 0.625rem;
  border-radius: var(--radius-md);
  background: var(--bg);
}
.hazards-marked-item-icon { font-size: 1rem; flex-shrink: 0; }
.hazards-marked-item-label { flex: 1; min-width: 0; font-size: 0.8125rem; font-weight: 600; color: var(--text); }
.hazards-marked-item-remove {
  flex-shrink: 0;
  border: none;
  background: transparent;
  color: var(--text-faint);
  font-size: 0.8125rem;
  cursor: pointer;
  padding: 0.25rem;
  line-height: 1;
}
.hazards-marked-item-remove:hover { color: var(--danger); }
.hazards-marked-empty {
  font-size: 0.8125rem;
  color: var(--text-muted);
  text-align: center;
  padding: 0.75rem 0;
}
.hazards-marked-summary[hidden] { display: none; }
.hazards-marked-summary {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.75rem 0.875rem;
  background: var(--accent-light);
  color: var(--accent);
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: var(--radius-md);
  margin-bottom: 0.875rem;
}
.hazards-marked-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: auto;
  padding-top: 0.875rem;
  border-top: 0.0625rem solid var(--border-soft);
}
.hazards-marked-status { font-size: 0.75rem; color: var(--text-muted); }

@media (max-width: 68.75rem) {
  .hazards-mark-layout { grid-template-columns: 1fr; }
  .hazards-mark-layout .hazards-map-wrap { height: 20rem; }
  /* Stacked single-column layout -- matching the map's height no longer makes sense once the
     three cards aren't side by side, so let each just be its own natural height instead. */
  .hazards-tools-card, .hazards-marked-card { height: auto; overflow: visible; }
  .hazards-tools-list { overflow-y: visible; }
}

.building-data-shape--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0.75rem;
  font-size: 0.75rem;
  color: var(--text-faint);
  box-sizing: border-box;
}
.building-data-note {
  margin-top: 0.75rem;
  padding-top: 0.625rem;
  border-top: 0.0625rem solid var(--border-soft);
  font-size: 0.71875rem;
  color: var(--text-faint);
  line-height: 1.5;
}

/* Test 2 step's own floorplan card (see renderTestDropFloorplan) -- plain card, no
   selection-ring styling, with a Draw Interior Walls pill and an expand button overlaid
   in the top corners. */
.test-floorplan-card {
  position: relative;
  width: 100%;
  max-width: 34rem;
  margin: 0 auto;
  padding: 2.75rem 1.5rem 1.5rem;
  box-sizing: border-box;
  text-align: center;
}
.test-floorplan-expand-btn {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  border: 0.0625rem solid var(--border-soft);
  background: var(--surface);
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9375rem;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
}
.test-floorplan-expand-btn:hover { background: var(--accent-light); border-color: var(--accent); color: var(--accent); }
/* Opened by .test-floorplan-expand-btn -- just the same outline, bigger, over a dark
   backdrop; closes on either the × or clicking outside the picture itself. */
.test-floorplan-lightbox[hidden] { display: none; }
.test-floorplan-lightbox {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(15, 15, 20, 0.72);
  padding: 2rem;
  box-sizing: border-box;
}
.test-floorplan-lightbox-svg {
  width: min(90vw, 37.5rem);
  height: min(90vw, 37.5rem);
  background: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}
.test-floorplan-lightbox-close {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  border: none;
  background: var(--surface);
  color: var(--text);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: var(--shadow-md);
}
/* Test 2 step's file-type chips (see the report-section markup below) -- purely decorative
   labeling of what's accepted, not individually clickable. */
.test-drop-zone-chips {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.375rem;
}
.test-drop-zone-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3125rem;
  padding: 0.25rem 0.625rem;
  border-radius: 62.4375rem;
  background: var(--surface);
  border: 0.0625rem solid var(--border-soft);
  font-size: 0.71875rem;
  font-weight: 700;
  color: var(--text);
}
.test-drop-zone-chip--accent { background: var(--danger-light); color: var(--danger); border-color: transparent; }

.owner-search-bar {
  position: relative;
  max-width: 32.5rem;
  margin: 0 auto 0.5rem;
}
/* The "nothing searched yet" stage — big enough to be the obvious, only thing on screen,
   since there's nothing else to look at until a search happens.
   page-body--center sets display:flex unconditionally, which otherwise overrides the
   [hidden] attribute's default display:none (a class rule beats the browser's UA
   stylesheet at equal specificity) — this makes [hidden] win back once JS sets it. */
#reportSearchStage[hidden] { display: none; }
/* Same gotcha, same fix -- #addressConfirmStage also carries page-body--center. Without
   this, setting its hidden attribute (see applyContext/showAddressConfirmStage) never
   actually hid it, so it stayed visible, flex-laid-out, on top of every other page. */
#addressConfirmStage[hidden] { display: none; }
/* Title, subtitle, and search bar sit close together as one group (page-body--center's
   own justify-content:center handles the overall vertical placement) -- an earlier version
   pinned the title to the top with the search bar centered separately below it, which left
   a big gap between them; this matches the reference design's tighter grouping instead.
   The translateY nudges that centered group up slightly rather than sitting dead-center. */
#reportSearchStage.page-body--center { transform: translateY(-0.9375rem); }
/* Scoped to just this one heading (not .page-title generally, which the wizard step
   titles also use on their own plain light background) -- white reads against the
   background video behind this stage specifically. */
#searchStageTitle { color: #fff; }
/* Equal auto margins on this wrapper (not the stage itself) absorb the leftover space
   below the heading and center the search bar within it, while the heading above stays
   pinned near the top -- justify-content:center on the stage would center everything
   (heading included) as one block instead. */
.owner-search-center-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  margin-top: 2rem;
}
.owner-search-bar--big { max-width: 40rem; width: 100%; }
.field-input--big {
  padding: 1.25rem 1.375rem;
  font-size: 1.25rem;
  border-radius: var(--radius-md);
}
.owner-search-results {
  display: none;
  position: absolute;
  top: calc(100% + 0.375rem);
  left: 0;
  right: 0;
  z-index: 5;
  background: var(--surface);
  padding: 0.375rem;
  border-radius: var(--radius-md);
  border: 0.0625rem solid var(--border-soft);
  box-shadow: var(--shadow-lg);
}
.owner-search-results.open { display: block; }
.owner-search-result-btn {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  padding: 0.5625rem 0.75rem;
  border-radius: var(--radius-sm);
  border: 0.0625rem solid transparent;
  font-family: inherit;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--text);
  cursor: pointer;
  transition: background 0.12s var(--ease), color 0.12s var(--ease);
}
.owner-search-result-btn:hover {
  background: var(--accent-light);
  color: var(--accent-darker);
}
.owner-search-result-btn + .owner-search-result-btn { margin-top: 0.0625rem; }
.owner-search-status {
  text-align: center;
  font-size: 0.78125rem;
  /* Sits over the dark video background (see #reportSearchStage), not a light surface --
     var(--text-muted) is a dark gray meant for light backgrounds and was nearly invisible
     here. */
  color: rgba(255, 255, 255, 0.85);
  min-height: 1.4em;
  margin: 0 0 1.5rem;
}
.owner-search-status--error { color: var(--danger); }

/* Fixed behind everything (negative z-index, no scroll/resize handling needed since
   position:fixed already covers the viewport regardless of page height) -- object-fit:
   cover crops rather than stretches, same as a CSS background-image: cover would. */
.page-bg-video {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}
/* Dark tint over the video (not the "no overlay, clear as day" wash from before -- this
   one's dark, matching the mockup's tone, not a light readability wash) -- hidden/shown in
   lockstep with the video itself (see applyContext), since it's only relevant on the
   search stage. */
.page-bg-video-overlay {
  position: fixed;
  inset: 0;
  background: rgba(8, 10, 18, 0.62);
  z-index: -1;
}

/* Dark nav variant, only for the search stage (see top-nav--dark on #topNav, swapped back
   to the plain light nav in applyContext once a report is shown). */
.top-nav--dark {
  background: transparent;
  border-bottom-color: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.top-nav--dark .nav-back { color: rgba(255, 255, 255, 0.85); }
.top-nav--dark .nav-back:hover { color: #fff; }
.top-nav--dark .nav-back--pill {
  background: rgba(255, 255, 255, 0.12);
  border: 0.0625rem solid rgba(255, 255, 255, 0.3);
  border-radius: 62.4375rem;
  padding: 0.5rem 1.25rem;
}
.top-nav--dark .nav-back--pill:hover { background: rgba(255, 255, 255, 0.2); }

.search-title-accent { color: var(--accent); }
.search-stage-subtitle {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin: 0.25rem 0 0;
}

/* Location-pin icon inline in the search field, and a circular submit button on the
   right -- both purely visual layered on top of the existing input via absolute
   positioning, not new form controls (the actual search already runs as-you-type via
   createSearchBox; the submit button just re-triggers picking the top match, same as
   pressing Enter already does). */
.owner-search-bar-icon {
  position: absolute;
  left: 1.375rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.125rem;
  pointer-events: none;
}
.owner-search-bar--big .field-input--big {
  padding-left: 3.25rem;
  padding-right: 3.75rem;
}
.owner-search-bar-submit {
  position: absolute;
  right: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  border: none;
  background: var(--accent);
  color: #fff;
  font-size: 1.125rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.owner-search-bar-submit:hover { background: var(--accent-dark); }

/* Review step's Finish button (see reviewMode/updateWizardView) -- performs the same claim
   action as the normal "This Is My Business" button (see currentClaimAction), just styled
   as a prominent bottom-right pill CTA to close out onboarding instead. */
#reportFinishWrap[hidden] { display: none; }
#reportFinishWrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  margin-top: 2rem;
}
.onboarding-complete-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.875rem 1.75rem;
  border: none;
  border-radius: 62.4375rem;
  background: var(--accent);
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 0.0625rem 0.125rem rgba(209, 69, 15, 0.3);
  transition: background 0.15s var(--ease);
}
.onboarding-complete-btn:hover { background: var(--accent-dark); }
.onboarding-complete-btn:disabled { opacity: 0.6; cursor: not-allowed; }

/* First-time report wizard (see startWizard/updateWizardView) -- walks a brand-new
   address through Floor Plan -> Building Data -> Hazards one full-screen step at a time,
   instead of showing every section at once the way an already-saved report does. Both
   elements' own display:flex below would otherwise beat the browser's default
   [hidden]{display:none} at equal specificity (same gotcha as #reportSearchStage
   elsewhere on this page) -- these overrides are what actually keep
   them hidden until the wizard turns them on. */
#wizardNav[hidden], #wizardEditNav[hidden] { display: none; }
/* Same gotcha again -- .top-nav a.nav-back (theme.css) beats plain [hidden] at equal
   specificity, so updateWizardView hiding #editModeBackLink outside edit mode did nothing
   without this override; it just stayed visible on the plain saved report. */
#editModeBackLink[hidden] { display: none; }
/* Tighter than .page-subtitle--center's shared 2.25rem (theme.css) -- scoped to this one
   ID rather than editing that class, since it's a shared style other pages may also use. */
#reportSubtitle { margin-bottom: 1.25rem; }
/* Same [hidden]-vs-display:flex specificity gotcha as #wizardNav/#reportSearchStage above --
   without this override, updateWizardView setting .hidden = true on an active wizard step
   doesn't actually hide it, since .report-header-meta's own display: flex (below) wins the
   cascade at equal specificity against the browser's default [hidden] { display: none }. */
#reportHeaderMeta[hidden] { display: none; }
/* "Last updated"/"all sections complete" meta row -- Confirm Layout review screen and the
   saved-report view only, see updateWizardView. Plain/regular weight, not competing with the
   bold title above it. */
.report-header-meta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin: -0.5rem 0 1.25rem;
}
.report-header-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.8125rem;
  font-weight: 400;
  color: var(--text-muted);
}
/* Onboarding percent-complete bar -- see updateWizardView in report-wizard.js. Used to have a
   row of step pills (.wizard-progress/.wizard-progress-step) above it -- removed for being
   redundant with this bar. */
.wizard-progress-bar {
  max-width: 25rem;
  margin: 0 auto 1.5rem;
}
.wizard-progress-bar-label {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text-muted);
  text-align: center;
  margin-bottom: 0.375rem;
}
.wizard-progress-bar-track {
  height: 0.5rem;
  background: var(--bg);
  border: 0.0625rem solid var(--border-soft);
  border-radius: 62.4375rem;
  overflow: hidden;
}
.wizard-progress-bar-fill {
  height: 100%;
  width: 0%;
  background: var(--accent);
  border-radius: inherit;
  /* Slow enough to actually watch it move (the 0% -> 40% reveal especially, see
     setWizardProgressBar in report-wizard.js) -- 0.2s read as an instant snap. */
  transition: width 2s var(--ease);
}
/* Brief brightness flash once the fill finishes moving -- triggered by report-wizard.js
   listening for the width transition's `transitionend`, not on a timer, so it lines up exactly
   with wherever the bar actually stops even if the duration above changes later. */
@keyframes wizard-progress-bar-flash {
  0% { filter: brightness(1); }
  50% { filter: brightness(1.6); }
  100% { filter: brightness(1); }
}
.wizard-progress-bar-fill--flash { animation: wizard-progress-bar-flash 0.5s ease-out; }
.wizard-nav {
  display: flex;
  justify-content: space-between;
  margin-top: 1.25rem;
  padding-top: 0.875rem;
  border-top: 0.0625rem solid var(--border-soft);
}
#reportWelcomeLabel[hidden], #reportWelcomeTitle[hidden], #reportWelcomeSubtitle[hidden] { display: none; }
.report-welcome-label {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-faint);
  margin: 0 0 0.375rem;
}
.report-welcome-title {
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text);
  margin: 0 0 0.5rem;
}
.report-welcome-subtitle {
  font-size: 0.9375rem;
  color: var(--text-muted);
  margin: 0 0 1.5rem;
}
/* Wider than the normal 900px page-body cap -- the Building Data card (bigger now, see
   renderBuildingData's own size) is the only thing shown once a report is already saved
   (no more tabs/other sections), so it gets the room to match; the wizard needed the same
   extra width for its own reasons before this, kept unconditional rather than re-adding a
   wizard-only qualifier for the same value. */
#reportSections { max-width: 90rem; }
/* Tighter than .page-body's shared 3rem top/bottom (theme.css) -- wizard steps only, so
   everything fits on screen without scrolling; the normal already-saved view keeps the
   default spacing. */
#reportSections.report-sections--wizard { padding-top: 1.25rem; padding-bottom: 1.25rem; }
/* gmp-map needs an explicit height per Google's own docs -- 100% of whichever wrap sizes
   it (see .hazards-map-wrap). */
gmp-map { height: 100%; width: 100%; display: block; }
/* Hazards step's map (see renderFloorPlanHazards) -- sits where the static outline picture
   used to, sized to roughly match the list column beside it. */
.hazards-map-wrap {
  width: 26rem;
  max-width: 100%;
  height: 20rem;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
/* ── Interior Layout step: "Draw a Layout" / "Upload a Floor Plan" side by side (see the
   report-section[data-wizard-step="1"] markup). Actual wall drawing happens on
   floorplan-editor.html (startDrawingBtn/goToFloorplanEditor), not inline here -- this is a
   preview + an entry point, not a live canvas. ── */
.floorplan-step-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  align-items: stretch;
}
@media (max-width: 50rem) {
  .floorplan-step-layout { grid-template-columns: 1fr; }
}
.floorplan-draw-card, .floorplan-upload-card {
  padding: 1.5rem;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}
.floorplan-card-header {
  display: flex;
  align-items: flex-start;
  gap: 0.875rem;
  margin-bottom: 1.25rem;
}
.floorplan-card-icon {
  flex-shrink: 0;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
}
.floorplan-card-icon--draw { background: var(--accent-light); }
.floorplan-card-icon--upload { background: var(--info-light, #e0ecff); }
.floorplan-card-title { font-size: 1.0625rem; font-weight: 800; color: var(--text); }
.floorplan-card-subtitle { font-size: 0.8125rem; color: var(--text-muted); margin-top: 0.25rem; line-height: 1.4; }
.floorplan-preview-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 10rem;
  border: 0.0625rem dashed var(--border-soft);
  border-radius: var(--radius-lg);
  background: var(--bg);
  color: var(--text-faint);
  font-size: 0.8125rem;
}
.floorplan-start-drawing-btn { width: 100%; margin-top: auto; }
/* Wizard's Interior Layout step (see initTestDropZone) -- plain drag-and-drop file zone, no
   upload anywhere else, just accepts PNG/PDF/other images and lists what's been dropped. */
.test-drop-zone {
  width: 100%;
  flex: 1;
  min-height: 10rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1.25rem 2rem;
  box-sizing: border-box;
  border: 0.125rem dashed var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg);
  color: var(--text-muted);
  text-align: center;
  cursor: pointer;
  transition: background 0.15s var(--ease), border-color 0.15s var(--ease);
}
.test-drop-zone:hover, .test-drop-zone.drag-over {
  background: var(--accent-light);
  border-color: var(--accent);
  color: var(--accent);
}
.test-drop-zone-cloud { font-size: 1.75rem; }
.test-drop-zone-title { font-size: 0.9375rem; font-weight: 700; color: var(--text); }
.test-drop-zone-hint { font-size: 0.8125rem; }
.floorplan-browse-btn { margin-top: 0.5rem; pointer-events: none; } /* decorative -- the whole zone is already the click target */
.floorplan-help-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  margin: 1.25rem 0 0;
  font-size: 0.8125rem;
  color: var(--text-muted);
}
.test-drop-files {
  width: 100%;
  max-width: 50rem;
  margin: 1rem auto 0;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}
.test-drop-file {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.625rem 0.875rem;
  background: var(--surface);
  border: 0.0625rem solid var(--border-soft);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs);
  /* text-decoration/color reset -- also used as an <a> now (see the Attachments card in
     renderBuildingData), not just the drop zone's own plain divs. */
  text-decoration: none;
  color: inherit;
}
.test-drop-file-thumb {
  flex-shrink: 0;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-sm);
  object-fit: cover;
  background: var(--bg);
}
.test-drop-file-icon {
  flex-shrink: 0;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-sm);
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
}
.test-drop-file-info { flex: 1; min-width: 0; }
.test-drop-file-name {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.test-drop-file-meta { font-size: 0.71875rem; color: var(--text-muted); }
.test-drop-file-meta--error { color: var(--danger); }
.test-drop-file-remove {
  flex-shrink: 0;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  border: none;
  background: var(--bg);
  color: var(--text-muted);
  font-size: 0.875rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.test-drop-file-remove:hover { background: var(--danger-light); color: var(--danger); }
/* Content of each dropped gmp-advanced-marker (see placeHazardMarker) -- positioning
   itself is handled entirely by the Maps SDK, this is just what it looks like. */
.hazard-pin-wrap { position: relative; }
.hazard-pin-icon {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  box-shadow: var(--shadow-md);
  border: 0.125rem solid #fff;
  cursor: grab;
}
.hazard-pin-icon:active { cursor: grabbing; }
/* Small "i" badge, top-right corner of the icon -- see placeHazardMarker for why its
   click/pointerdown handlers stop propagation (otherwise the marker's own drag handling,
   listening on the whole wrap, would swallow the click too). */
.hazard-pin-info-btn {
  position: absolute;
  top: -0.25rem;
  right: -0.25rem;
  width: 1.125rem;
  height: 1.125rem;
  border-radius: 50%;
  border: 0.0625rem solid var(--border-soft);
  background: #fff;
  color: var(--text);
  font-size: 0.625rem;
  font-weight: 800;
  font-style: italic;
  font-family: Georgia, serif;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
}
.hazard-pin-info-btn:hover { background: var(--accent-light); color: var(--accent); }
/* Top-left corner (info badge above takes top-right) -- see placeHazardMarker for why its
   click/pointerdown handlers stop propagation, same reasoning as the info badge. Removes
   the pin from the map right away; only persisted once hazardsMapSaveBtn is clicked, same
   as every other change made on this map. */
.hazard-pin-remove {
  position: absolute;
  top: -0.375rem;
  left: -0.375rem;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background: var(--danger);
  color: #fff;
  font-size: 0.625rem;
  line-height: 1rem;
  text-align: center;
  cursor: pointer;
  border: none;
  padding: 0;
}
/* Entrance/exit pins on the Hazards map -- same wrap/remove pattern as hazard pins (see
   placeHazardMarker), just a door icon instead of a hazmat one, and no info badge (only
   hazard markers need a coordinate readout). Main entrance gets --warning instead of
   --success so it reads apart from a regular exit at a glance, same as floorplan-editor.html
   -- note this distinction is display-only and doesn't persist (see saveExitsToDb / the
   Opening table, which has no "kind" column). */
.exit-pin-wrap { position: relative; }
.exit-pin-icon {
  width: 2rem;
  height: 2rem;
  border-radius: 0.375rem;
  background: var(--success);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  box-shadow: var(--shadow-md);
  border: 0.125rem solid #fff;
  cursor: grab;
}
.exit-pin-icon:active { cursor: grabbing; }
.exit-pin-remove {
  position: absolute;
  top: -0.375rem;
  left: -0.375rem;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background: var(--danger);
  color: #fff;
  font-size: 0.625rem;
  line-height: 1rem;
  text-align: center;
  cursor: pointer;
  border: none;
  padding: 0;
}

.building-data-picture-card {
  /* No fixed width -- sits inside a section card in the 2x2 grid now (see
     .building-data-grid), so it just fills whatever its flex row (.hazards-review-row) or,
     for Interior Plan (--full), its whole card gives it. */
  flex: 1;
  min-width: 0;
  padding: 1.5rem;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.building-data-info-card {
  padding: 1.5rem;
  width: 28rem;
  min-height: 14rem;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  /* Column + the actions row's margin-top: auto below is what pushes Edit down to the
     card's bottom edge instead of leaving it right under the chip grid once there's extra
     height to fill. */
  display: flex;
  flex-direction: column;
}
.building-data-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: auto;
  padding-top: 0.625rem;
}
.building-data-edit-pill {
  border: none;
  background: var(--danger-light);
  color: var(--danger);
  font-weight: 700;
  font-size: 0.8125rem;
  padding: 0.625rem 1.125rem;
  border-radius: 62.4375rem;
  cursor: pointer;
}
.building-data-edit-pill:hover { filter: brightness(0.97); }
/* Used inline next to a small uppercase section title (see renderBuildingData's
   editPillHtml) -- the base pill's own padding/font-size is sized for standing alone at
   the bottom of a card, too large next to 0.75rem title text. */
.building-data-edit-pill--sm {
  padding: 0.3125rem 0.75rem;
  font-size: 0.6875rem;
}
.building-data-chip-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.625rem;
  align-content: start;
}
.building-data-chip {
  background: var(--bg);
  border-radius: var(--radius-md);
  padding: 0.5rem 0.75rem;
}
.field-optional-label { color: var(--danger); }
.building-data-chip-label {
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  margin-bottom: 0.25rem;
}
.building-data-chip-value {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--text);
}
.building-data-chip-input {
  width: 100%;
  box-sizing: border-box;
  font-size: 0.875rem;
  font-weight: 600;
  padding: 0.375rem 0.5rem;
}
.building-data-note-bar {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  margin-top: 0.75rem;
  padding: 0.625rem 0.75rem;
  border-radius: var(--radius-md);
  background: var(--bg);
  font-size: 0.8125rem;
  color: var(--text-muted);
}
.building-data-note-icon {
  flex-shrink: 0;
  width: 1.125rem;
  height: 1.125rem;
  border-radius: 50%;
  border: 0.09375rem solid var(--text-faint);
  color: var(--text-faint);
  font-size: 0.6875rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 0.0625rem;
}
/* Sits below the two-card row now (see renderBuildingData), not inside
   .building-data-info-card -- max-width matches that row's own combined footprint (28rem
   + 28rem + the row's 1.75rem gap) so it lines up under both cards instead of just one,
   centered the same way the row itself is. */
.building-data-step-card {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  max-width: 57.75rem;
  margin: 0.75rem auto 0;
  padding: 0.625rem 1.25rem;
  background: var(--accent-light);
  border: 0.0625rem solid rgba(209, 69, 15, 0.25);
  border-radius: var(--radius-md);
}
.building-data-step-badge {
  flex-shrink: 0;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: 0.875rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}
.building-data-step-title {
  font-size: 0.9375rem;
  font-weight: 800;
  color: var(--accent);
  margin-bottom: 0.25rem;
}
.building-data-step-text {
  font-size: 0.8125rem;
  color: var(--text);
  line-height: 1.5;
}
.building-data-step-text strong { font-weight: 700; }

/* ── Building Data 2x2 grid (see renderBuildingData) -- Hazards / Interior Plan / Contacts /
   Attachments each in their own card, all with the same icon+title+subtitle+Edit-pill header
   (sectionHeaderHtml). ── */
.building-data-grid {
  display: grid;
  /* Not an even 1fr 1fr -- Hazards (left column) needs more room for its map+list side by
     side than Interior Plan's single picture does. Since it's one grid, this same ratio
     also applies to Contacts/Attachments below (they share the same two columns). */
  grid-template-columns: 1.35fr 0.9fr;
  gap: 1.25rem;
}
@media (max-width: 60rem) {
  .building-data-grid { grid-template-columns: 1fr; }
}
.building-data-section-card {
  padding: 1.5rem;
  box-sizing: border-box;
  /* Grid stretches every card in a row to the same outer height already, but the header
     +content stack inside was plain block flow, so a shorter card's content just left blank
     space at the bottom instead of the content growing to match its taller row-mate (see
     Contacts vs. Attachments). flex-direction: column + flex: 1 on the content below the
     header (next two rules) makes the content itself fill that height. */
  display: flex;
  flex-direction: column;
}
.building-data-section-header {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  margin-bottom: 1rem;
}
.building-data-section-icon {
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9375rem;
  background: var(--accent-light);
}
.building-data-section-icon--accent { background: var(--info-light, #e0ecff); }
.building-data-section-header-text { flex: 1; min-width: 0; }
.building-data-section-title { font-size: 0.9375rem; font-weight: 800; color: var(--text); }
.building-data-section-subtitle { font-size: 0.75rem; color: var(--text-muted); margin-top: 0.125rem; }
/* Interior Plan's floorplan picture fills the whole card now -- no status box beside it. */
.building-data-picture-card--full { width: 100%; }
/* Contacts' two mini-cards, side by side -- either filled with real data, or an empty state
   ("Not added yet" -- the card's own Edit pill up in the header covers jumping to the
   Contacts step). */
.building-data-contacts-row {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  flex: 1;
}
.building-data-contact-mini-card {
  flex: 1;
  min-width: 9rem;
  padding: 1.5rem 1rem;
  background: var(--bg);
  border-radius: var(--radius-lg);
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.building-data-contact-mini-card--filled { text-align: left; align-items: flex-start; }
.building-data-contact-mini-label {
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  margin-bottom: 0.625rem;
}
.building-data-contact-mini-icon { display: block; font-size: 1.5rem; margin: 0 auto 0.5rem; }
.building-data-contact-mini-empty { font-size: 0.8125rem; color: var(--text-faint); margin-bottom: 0.75rem; }
.building-data-contact-name { font-size: 0.9375rem; font-weight: 700; color: var(--text); }
.building-data-contact-meta { font-size: 0.8125rem; color: var(--text-muted); margin-top: 0.125rem; }
.building-data-action-btn { font-size: 0.8125rem; padding: 0.5rem 1rem; }
/* Attachments' empty state -- "Upload Files" opens the native picker right here (see
   initBuildingDataAttachmentUpload in report-attachments.js), not a jump to the Interior
   Layout step's drop zone. */
.building-data-upload-empty {
  text-align: center;
  padding: 2rem 1.5rem;
  border: 0.0625rem dashed var(--border-soft);
  border-radius: var(--radius-lg);
  background: var(--bg);
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.building-data-upload-empty-icon { display: block; font-size: 1.75rem; margin-bottom: 0.5rem; }
.building-data-upload-empty-title { font-size: 0.875rem; font-weight: 700; color: var(--text); }
/* Filled state's own upload trigger, below the file list. */
.building-data-add-more-btn { margin-top: 0.875rem; }
.building-data-upload-status { font-size: 0.75rem; color: var(--text-muted); margin: 0.5rem 0 0; }
.building-data-upload-empty-hint { font-size: 0.8125rem; color: var(--text-muted); margin: 0.25rem 0 1rem; }

/* Contacts step (data-wizard-step="0") -- one card, centered, since there's no map above
   it to left-align with. */
.contacts-cards-row {
  display: flex;
  justify-content: center;
}
.contacts-card {
  width: 100%;
  /* Wide enough for Role/Title and Phone to sit side by side without cramping either field. */
  max-width: 44rem;
  padding: 1.75rem;
  box-sizing: border-box;
}
/* Only one of .contacts-column ever shows at once during onboarding (see
   addSecondaryContactBtn/backToPrimaryContactBtn in report-contacts.js) -- this row just gives
   whichever one is visible the same width the two-column layout used to split between them. */
.contacts-columns {
  display: flex;
  align-items: stretch;
  gap: 1.75rem;
}
.contacts-column {
  flex: 1;
  min-width: 0;
}
.add-secondary-contact-btn { margin-top: 1.25rem; }
.contacts-card-title { font-size: 1.0625rem; font-weight: 800; color: var(--text); margin-bottom: 1.25rem; }
.contacts-section-hint { font-size: 0.78125rem; color: var(--text-muted); margin: 0 0 0.875rem; }
.contacts-field-grid {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}
.building-data-chip-row {
  display: flex;
  gap: 0.875rem;
}
.building-data-chip-row .building-data-chip {
  flex: 1;
  min-width: 0;
}
/* Icon+field pairing, contacts step only -- deliberately its own class rather than changing
   .building-data-chip/.building-data-chip-row, which report-building-data.js's read-only
   displays elsewhere also use without an icon. */
.building-data-chip-row .contacts-field-with-icon { flex: 1; min-width: 0; }
.contacts-field-with-icon {
  display: flex;
  align-items: center;
  gap: 0.625rem;
}
.contacts-field-with-icon .building-data-chip { flex: 1; min-width: 0; }
.contacts-field-icon {
  flex-shrink: 0;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: var(--radius-sm);
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
}
.contacts-card-actions {
  display: flex;
  align-items: center;
  /* space-between, not flex-end -- the primary/secondary toggle button sits on the left,
     status text + Save (grouped in .contacts-save-group so they stay adjacent) on the right,
     sharing this one row instead of Save having its own row below. */
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.25rem;
}
.contacts-save-group {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-left: auto;
}
.contacts-save-status {
  font-size: 0.8125rem;
  color: var(--text-muted);
}

@media (max-width: 43.75rem) {
  .contacts-columns {
    flex-direction: column;
    gap: 1.25rem;
  }
}

/* Phone-width layout (iPhone-class viewports and similar) -- the desktop layout puts the
   outline picture and the chip grid side by side, which has no room to breathe under
   ~700px; everything below stacks into a single column instead. */
@media (max-width: 43.75rem) {
  .page-title { font-size: 1.875rem; }
  .hazards-review-row,
  .building-data-contacts-row {
    flex-direction: column;
    align-items: stretch;
  }
  .building-data-chip-grid {
    max-width: none;
    grid-template-columns: 1fr;
  }
  .building-data-actions {
    justify-content: center;
  }
}

/* ── Edit History dropdown (edit-history.js) -- closed-by-default trigger + popover panel.
   Short mode: the ~4 most recent days, checkmark on the selected one, plus "View all changes".
   Full mode (after "View all changes"): every day as a .history-date-list, each with a caret
   to expand into the individual timestamped edits within that day. ── */
.history-dropdown {
  position: relative;
  max-width: 25rem;
  margin: 0 auto 1.5rem;
}
.history-dropdown-trigger {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  width: 100%;
  padding: 0.75rem 1rem;
  background: var(--surface);
  border: 0.0625rem solid var(--border-soft);
  border-radius: var(--radius-md);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  text-align: left;
}
.history-dropdown-trigger:hover { background: var(--bg); }
.history-dropdown-trigger-label { flex: 1; }
.history-dropdown-trigger-caret {
  font-size: 0.75rem;
  color: var(--text-muted);
}
.history-dropdown-panel {
  position: absolute;
  top: calc(100% + 0.375rem);
  left: 0;
  right: 0;
  z-index: 20;
  background: var(--surface);
  border: 0.0625rem solid var(--border-soft);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md, 0 0.5rem 1.5rem rgba(0, 0, 0, 0.12));
  overflow: hidden;
}
.history-dropdown-item {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  width: 100%;
  padding: 0.625rem 1rem;
  border: none;
  border-bottom: 0.0625rem solid var(--border-soft);
  background: transparent;
  font-size: 0.8125rem;
  color: var(--text);
  cursor: pointer;
  text-align: left;
}
.history-dropdown-item:hover { background: var(--bg); }
.history-dropdown-item.selected { color: var(--accent); font-weight: 600; }
.history-dropdown-item-check {
  width: 1rem;
  flex-shrink: 0;
  color: var(--accent);
  font-size: 0.75rem;
}
.history-dropdown-view-all {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  width: 100%;
  padding: 0.625rem 1rem;
  border: none;
  background: transparent;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--accent);
  cursor: pointer;
  text-align: left;
}
.history-dropdown-view-all:hover { background: var(--bg); }
.history-date-list {
  max-height: 24rem;
  overflow-x: hidden;
  overflow-y: auto;
}
.history-date-group + .history-date-group { border-top: 0.0625rem solid var(--border-soft); }
.history-date-group-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.75rem 1rem;
  border: none;
  background: transparent;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  text-align: left;
}
.history-date-group-header:hover { background: var(--bg); }
.history-date-group-header.active { background: var(--accent-light); color: var(--accent); }
.history-date-caret {
  display: inline-block;
  font-size: 0.625rem;
  color: var(--text-muted);
  transition: transform 0.15s var(--ease);
  flex-shrink: 0;
}
.history-date-group.open .history-date-caret { transform: rotate(90deg); }
.history-date-entries {
  display: flex;
  flex-direction: column;
  padding-bottom: 0.25rem;
}
.history-date-entry {
  padding: 0.5rem 1rem 0.5rem 2.25rem;
  border: none;
  background: transparent;
  font-size: 0.8125rem;
  color: var(--text-muted);
  cursor: pointer;
  text-align: left;
}
.history-date-entry:hover { background: var(--bg); }
.history-date-entry.active { background: var(--accent-light); color: var(--accent); font-weight: 600; }

/* ── Export as PDF (report-export.js) -- window.print(), not a canvas library. ── */
.pdf-export-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  margin: 2rem 0;
}
/* Without this, [hidden]'s default `display: none` (a UA style) loses to the author rule
   above at equal specificity -- pdfExportRowEl.hidden = true (report-wizard.js) was setting
   the attribute correctly but the row stayed visually flexed during active wizard steps. */
.pdf-export-row[hidden] { display: none; }
/* ── "Confirm Report is Up to Date" status line (report-verify.js). ── */
.verify-report-status {
  text-align: center;
  margin-top: -1.25rem;
  margin-bottom: 2rem;
  font-size: 0.8125rem;
  color: var(--text-muted);
}
@media print {
  /* Nav, edit affordances, and the button itself don't belong in a printed/exported report.
     .history-dropdown is edit-history.html's date picker -- the printed page should show the
     selected date's report content, not the picker used to choose it. */
  .no-print,
  .top-nav,
  .building-data-edit-pill,
  #claimBusinessSection,
  .history-dropdown {
    display: none !important;
  }
  /* .page-shell--gradient's own background rule (theme.css) otherwise outranks a plain `body`
     selector -- printing that gradient wastes ink/toner and doesn't read as a clean document. */
  body.page-shell--gradient,
  body {
    background: #fff !important;
  }

  /* Landscape: the on-screen side-by-side card rows need real width to stay side by side --
     a portrait page (~6.5in printable) can't fit them without shrinking cards illegibly small,
     landscape (~9-10in) can. */
  @page { size: landscape; margin: 0.5in; }

  /* #reportSections/.building-data-column are deliberately wide (90rem/56.75rem) so the card
     rows below have room on a desktop screen -- but those are max-widths centered with auto
     margins, which on a narrower print page just wastes width as side margins instead of
     giving the rows more room. Print gets the page's full width instead. */
  #reportSections,
  .building-data-column {
    max-width: 100% !important;
    margin: 0 !important;
    padding-left: 0;
    padding-right: 0;
  }

  /* Chromium's print layout doesn't reliably re-flow flex content against the actual paper
     width first, so a row that would otherwise wrap at print width instead just gets the
     desktop-width layout cropped at the page edge. Forcing nowrap keeps each row side by side
     (matching the screen) at whatever width the page actually has -- the 2x2 grid itself
     collapses to one column below (same reasoning, one level up). */
  .hazards-review-row,
  .building-data-contacts-row {
    flex-wrap: nowrap;
  }
  .building-data-grid {
    grid-template-columns: 1.35fr 0.9fr !important;
  }
  /* Scoped to the Hazards row specifically -- .building-data-picture-card is reused unscoped
     by Interior Plan's full-width card (.building-data-picture-card--full), and this same
     selector unscoped was squashing that one to 52% width too, leaving it looking offset/
     duplicated against its card's full-width background. */
  .hazards-review-row .building-data-picture-card {
    width: 52%;
    flex-shrink: 0;
  }
  .hazards-lists-col {
    width: auto;
    flex: 1;
    min-width: 0;
  }
  /* Without this, a card that doesn't quite fit in the remaining page space gets fragmented
     mid-box instead of moving whole to the next page -- Chrome's print engine mishandles
     fragmenting a flex-grow child (.building-data-contacts-row/.building-data-upload-empty,
     added for equal-height cards) across that boundary and renders a corrupted duplicate/
     offset box instead of clean pagination. */
  .building-data-section-card {
    break-inside: avoid;
  }
}