.roof-array-authoring {
  display: grid;
  gap: 1rem;
}

.roof-array-intro {
  border-left: 4px solid var(--focus);
  padding: .1rem 0 .1rem 1rem;
}

.roof-array-intro p {
  margin: .25rem 0;
}

.roof-array-workspace {
  align-items: start;
  display: grid;
  gap: 1rem;
  grid-template-columns: minmax(19rem, .9fr) minmax(28rem, 1.1fr);
}

.roof-array-form-column,
.roof-array-preview {
  min-width: 0;
}

.roof-array-form-column form {
  display: grid;
  gap: 1rem;
}

.roof-array-group,
.roof-array-preview,
.roof-array-saved {
  border: 1px solid var(--line);
  border-radius: .75rem;
  margin: 0;
  padding: 1rem;
}

.roof-array-group legend,
.roof-array-group > summary,
.roof-array-saved > summary {
  color: var(--ink);
  font-weight: 750;
}

.roof-array-group > summary {
  align-items: center;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  min-height: 2rem;
}

.roof-array-missing-count {
  color: var(--muted);
  font-size: .82rem;
  font-weight: 600;
}

.roof-array-group-help {
  margin: .35rem 0 .8rem;
}

.roof-array-field {
  display: grid;
  gap: .3rem;
  margin-top: .75rem;
}

.roof-array-field label {
  color: var(--ink);
  font-weight: 650;
}

.roof-array-field input,
.roof-array-field select {
  max-width: none;
  width: 100%;
  min-height: 44px;
  padding: .55rem .7rem;
  border: 1px solid var(--line);
  border-radius: .4rem;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
}

.roof-array-group-error {
  color: var(--red);
  margin: .65rem 0 0;
}

.roof-array-group-error:empty {
  display: none;
}

.roof-array-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
}

.roof-array-error:empty {
  display: none;
}

.roof-array-revision-note {
  border-left: 3px solid var(--amber);
  color: var(--muted);
  margin: 0;
  padding-left: .75rem;
}

.roof-array-preview {
  min-height: 23rem;
  position: sticky;
  top: 1rem;
}

[data-roof-array-summary] {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1rem;
  margin-bottom: .6rem;
}

[data-roof-array-summary] p {
  display: contents;
}

.roof-array-saved {
  margin-top: 1rem;
}

.roof-array-saved-choice {
  display: block;
  margin-top: .5rem;
  text-align: left;
  width: 100%;
}

.roof-array-later {
  margin: 0;
}

@media (max-width: 900px) {
  .roof-array-workspace {
    grid-template-columns: minmax(0, 1fr);
  }

  .roof-array-preview {
    position: static;
  }

  .roof-array-field input,
  .roof-array-field select {
    font-size: 16px;
  }
}

.geometry-studio {
  container: roof-workspace / inline-size;
}

.guided-roof-builder {
  display: grid;
  grid-template-columns: minmax(11rem, .42fr) minmax(20rem, .92fr) minmax(28rem, 1.35fr);
  gap: 1rem;
  align-items: start;
}

.guided-roof-builder.site-outline-mode:not(.results-only) {
  grid-template-columns: minmax(0, 1fr);
}
.guided-roof-builder.site-outline-mode .guided-roof-status { grid-column: 1; }
.guided-roof-builder.site-outline-mode .guided-roof-rail {
  display: flex; gap: .2rem; overflow-x: auto; position: static;
}
.guided-roof-builder.site-outline-mode .guided-roof-rail li { flex: 1 0 auto; }
.guided-roof-builder.site-outline-mode .guided-roof-canvas { display: none; }
.guided-site-outline-finder {
  display: grid; gap: .75rem 1rem;
  grid-template-columns: minmax(0, 1fr);
  min-width: 0;
}
.guided-site-outline-finder > * { grid-column: 1; }
.guided-site-outline-map { min-width: 0; scroll-margin-top: 12rem; width: 100%; }
.guided-site-outline-search { display: flex; flex-wrap: wrap; align-items: end; gap: .75rem; }
.guided-site-outline-search label { display: grid; gap: .3rem; min-width: min(100%, 18rem); }

.guided-roof-builder.results-only {
  grid-template-columns: minmax(11rem, .42fr) minmax(0, 2.27fr);
}

.guided-roof-builder.results-only .guided-roof-canvas { display: none; }

.guided-roof-rail {
  list-style: none;
  margin: 0;
  padding: .45rem;
  border: 1px solid var(--line);
  border-radius: .85rem;
  background: color-mix(in srgb, var(--surface) 92%, var(--focus));
  position: sticky;
  top: 1rem;
}

.guided-roof-rail li {
  align-items: center;
  color: var(--muted);
  display: grid;
  font-size: .9rem;
  font-weight: 650;
  gap: .65rem;
  grid-template-columns: 1.8rem 1fr;
  padding: .62rem;
  border-radius: .55rem;
}

.guided-roof-rail li > span:first-child {
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  display: inline-flex;
  height: 1.7rem;
  justify-content: center;
  width: 1.7rem;
}

.guided-roof-rail li.current {
  background: var(--focus);
  color: white;
}

.guided-roof-rail li.current > span:first-child { border-color: white; }
.guided-roof-rail li.complete { color: var(--ink); }

.guided-roof-stage,
.guided-roof-canvas {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: .85rem;
  padding: 1rem;
  background: var(--surface);
}

.guided-roof-canvas:empty {
  align-items: center;
  background: linear-gradient(145deg,
    color-mix(in srgb, var(--surface) 94%, var(--focus)), var(--surface));
  color: var(--muted);
  display: flex;
  min-height: 30rem;
}

.guided-roof-canvas:empty::before {
  content: "The plan, 3D model and elevations appear here as the roof is built.";
  display: block;
  margin: auto;
  max-width: 24rem;
  padding: 2rem;
  text-align: center;
}

.guided-roof-form {
  display: grid;
  gap: .8rem;
  margin: 1rem 0;
}

.guided-roof-form.two-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* Native modelling navigation is not the office sidebar. Keep everyday
   stages compact, selected state visible, and accepted values in place. */
[data-native-roof] { container: native-roof / inline-size; }
[data-native-roof] [data-native-steps] {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .5rem;
  margin: 1rem 0;
}
@container native-roof (min-width: 70rem) {
  [data-native-roof] [data-native-steps] { grid-template-columns: repeat(8, minmax(0, 1fr)); }
}
[data-native-roof] h3,
[data-native-roof] [data-native-steps] { scroll-margin-top: 11rem; }
html[data-desktop-models-host="true"] [data-native-roof] h3,
html[data-desktop-models-host="true"] [data-native-roof] [data-native-steps] { scroll-margin-top: 1rem; }
@container native-roof (max-width: 44rem) {
  [data-native-roof] [data-native-steps] { display: flex; flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x proximity; }
  [data-native-roof] [data-native-steps] button { flex: 0 0 10rem; scroll-snap-align: start; }
}
[data-native-roof] [data-native-steps] button {
  width: auto;
  min-height: 44px;
  margin: 0;
  padding: .45rem .55rem;
  font-size: .88rem;
  line-height: 1.25;
}
[data-native-roof] [data-native-steps] button[aria-current="step"] {
  border-color: var(--focus);
  box-shadow: inset 0 0 0 1px var(--focus);
}
[data-native-roof] [hidden] { display: none !important; }
[data-native-roof].native-saved-picker-active > :not(h3):not([data-native-roof-intro]):not([data-native-status]):not([data-native-footer-actions]):not([data-native-saved]) { display: none !important; }
[data-native-roof] [data-native-objects]:not([hidden]),
[data-native-roof] [data-native-exclusions]:not([hidden]) {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: .8rem;
}
[data-native-roof] [data-native-objects] > :is(p, div, button),
[data-native-roof] [data-native-exclusions] > :is(p, div, button) { grid-column: 1 / -1; }

.guided-roof-field {
  color: var(--ink);
  display: grid;
  font-weight: 650;
  gap: .3rem;
}

.guided-roof-field input,
.guided-roof-field select {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: .45rem;
  color: var(--ink);
  font: inherit;
  min-height: 44px;
  padding: .55rem .7rem;
  width: 100%;
}

.guided-roof-evidence-choice-label {
  color: var(--muted);
  font-size: .9rem;
  font-weight: 450;
  line-height: 1.4;
  min-width: 0;
  overflow-wrap: anywhere;
  white-space: normal;
}

.guided-roof-actions,
.guided-roof-nav {
  display: flex;
  flex-wrap: wrap;
  gap: .7rem;
  justify-content: space-between;
  margin-top: 1rem;
}

.guided-roof-face-list {
  display: grid;
  gap: .45rem;
  margin: 1rem 0;
}

.guided-roof-face-list > div {
  align-items: baseline;
  background: color-mix(in srgb, var(--surface) 92%, var(--focus));
  border-radius: .45rem;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1rem;
  justify-content: space-between;
  padding: .7rem;
}

.guided-roof-object-grid,
.roof-elevation-grid {
  display: grid;
  gap: .75rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.guided-roof-object-form,
.guided-roof-engineering-group,
.roof-elevation-card {
  border: 1px solid var(--line);
  border-radius: .65rem;
  display: grid;
  gap: .65rem;
  min-width: 0;
  padding: .8rem;
}

.guided-roof-object-form legend { font-weight: 750; }
.guided-roof-engineering-group {
  margin: 0 0 .85rem;
}
.guided-roof-engineering-group > legend,
.guided-roof-engineering-group > summary {
  font-weight: 750;
}
.guided-roof-engineering-group > summary {
  cursor: pointer;
  padding: .1rem 0 .55rem;
}
.guided-roof-check {
  align-items: start;
  display: grid;
  gap: .55rem;
  grid-template-columns: 1.25rem 1fr;
  line-height: 1.35;
}
.guided-roof-check input {
  height: 1.1rem;
  margin: .15rem 0 0;
  width: 1.1rem;
}
.guided-roof-run-readiness {
  border-left: 3px solid var(--focus);
  margin: .4rem 0;
  padding: .35rem .75rem;
}
.guided-roof-run-readiness p { margin: 0; font-weight: 700; }
.guided-roof-run-readiness ul { margin: .35rem 0 0; padding-left: 1.25rem; }
.guided-roof-run-readiness li + li { margin-top: .2rem; }
.guided-roof-run-readiness button {
  background: none;
  border: 0;
  color: var(--ink);
  cursor: pointer;
  font: inherit;
  padding: .1rem 0;
  text-align: left;
  text-decoration: underline;
  text-underline-offset: .15rem;
}
.guided-roof-run-readiness button:hover { color: var(--focus); }
.guided-roof-run-readiness button:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}
.guided-roof-object-summary { font-weight: 700; }
.guided-roof-status { grid-column: 2 / -1; }
.guided-roof-status [data-roof-saved-primary] {
  display: block;
  max-width: 100%;
  text-align: left;
  white-space: normal;
}
.guided-roof-saved-history {
  border-top: 1px solid var(--line);
  margin-top: .75rem;
  padding: .75rem 0 0;
}
.guided-roof-saved-history summary { cursor: pointer; font-weight: 650; }
.guided-roof-saved-list { display: grid; gap: .5rem; margin-top: .75rem; }
.guided-roof-saved-list button { justify-self: start; max-width: 100%; text-align: left; white-space: normal; }
[data-saved-roof-chooser] { display: grid; gap: .6rem; }
[data-saved-roof-chooser] > h3,
[data-saved-roof-chooser] > p { margin: 0; }
[data-saved-roof-chooser] > button { justify-self: start; }
.roof-saved-filter { display: grid; gap: .35rem; max-width: 34rem; font-weight: 650; }
.roof-saved-filter input { box-sizing: border-box; width: 100%; min-height: 44px; padding: .55rem .75rem; border: 1px solid var(--line); border-radius: .5rem; font: inherit; }
.native-saved-roof-list {
  display: grid;
  gap: .8rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  margin: .8rem 0;
}
.native-saved-roof-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: .75rem;
  padding: .9rem;
}
.native-saved-roof-card h4 { margin: 0 0 .45rem; }
.native-saved-roof-card p { margin: 0 0 .8rem; }
.native-saved-roof-card details {
  border-top: 1px solid var(--line);
  margin-top: .8rem;
  padding-top: .5rem;
}
.native-saved-roof-card summary { cursor: pointer; }
.native-saved-roof-card code { display: block; overflow-wrap: anywhere; padding-top: .4rem; }
.native-saved-roof-copies { display: grid; gap: .45rem; margin-top: .6rem; }
.native-saved-roof-copies button { justify-self: start; text-align: left; white-space: normal; }

.roof-source-chooser,
.guided-lidar-roof {
  margin: 0 auto;
  max-width: 70rem;
}

.roof-source-saved {
  background: color-mix(in srgb, var(--surface) 94%, var(--focus));
  border: 1px solid var(--line);
  border-left: 4px solid var(--focus);
  border-radius: .75rem;
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  padding: 1rem;
}
.roof-source-saved h4,
.roof-source-saved p { flex-basis: 100%; margin: 0; }
.roof-source-saved button { max-width: 100%; text-align: left; white-space: normal; }

.roof-source-cards,
.guided-lidar-candidates {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 1.1rem 0;
}

.roof-source-card,
.guided-lidar-selected-building,
.guided-lidar-candidates article {
  background: color-mix(in srgb, var(--surface) 94%, var(--focus));
  border: 1px solid var(--line);
  border-radius: .75rem;
  display: grid;
  gap: .6rem;
  padding: 1rem;
}

.roof-source-card h4,
.roof-source-card p,
.guided-lidar-selected-building h4,
.guided-lidar-candidates h4 { margin: 0; }

.roof-source-chooser [data-open-saved-roof-annual] {
  display: block;
  margin: .5rem 0;
  max-width: 100%;
  text-align: left;
  white-space: normal;
}
.roof-run-evidence {
  border-left: 3px solid var(--focus);
  display: grid;
  gap: .35rem;
  padding: .4rem .8rem;
}
.roof-run-evidence h5,
.roof-run-evidence p { margin: 0; }
.roof-run-report-grid {
  border: 1px solid var(--line);
  border-radius: .6rem;
  display: grid;
  gap: .8rem 1rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  min-width: 0;
  padding: 1rem;
}
.roof-run-report-grid legend { font-weight: 700; padding: 0 .3rem; }
.roof-run-report-grid > p,
.roof-run-report-grid > button { grid-column: 1 / -1; }
.roof-run-report-field { display: grid; gap: .3rem; min-width: 0; }
.roof-run-report-field span { font-weight: 600; }
.roof-run-report-field input { box-sizing: border-box; min-width: 0; width: 100%; }
@media (max-width: 700px) {
  .roof-run-report-grid { grid-template-columns: minmax(0, 1fr); }
}

.guided-lidar-candidates svg,
.guided-lidar-selected-building svg {
  background: color-mix(in srgb, var(--surface) 88%, var(--focus));
  border-radius: .5rem;
  height: 9rem;
  width: 100%;
}

.guided-lidar-decision {
  align-items: start;
  display: grid;
  gap: 1rem;
  grid-template-columns: minmax(0, 1.6fr) minmax(16rem, .9fr);
  margin: 1rem 0;
}
.guided-lidar-decision > * { min-width: 0; }
.guided-lidar-decision .guided-lidar-context { margin: 0 !important; }
.guided-lidar-decision .guided-lidar-context svg {
  background: var(--surface);
  border-radius: .6rem;
}
.guided-lidar-decision-controls,
.guided-lidar-review-fields { display: grid; gap: .7rem; min-width: 0; }
.guided-lidar-decision .guided-lidar-candidates {
  gap: .55rem;
  grid-template-columns: minmax(0, 1fr);
  margin: 0;
}
.guided-lidar-decision .guided-lidar-candidates article { padding: .7rem; }
.guided-lidar-decision .guided-lidar-candidates.compact article {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.guided-lidar-decision .guided-lidar-candidates.compact h4 {
  flex: 1 1 10rem;
  font-size: .95rem;
}
.guided-lidar-decision .guided-lidar-candidates.compact button {
  flex: 0 0 auto;
  max-width: 100%;
  white-space: normal;
}
.guided-lidar-review-fields .guided-roof-actions { margin-top: .2rem; }
@media (max-width: 1100px) {
  .guided-lidar-decision { grid-template-columns: minmax(0, 1fr); }
  .guided-lidar-decision .guided-lidar-context { max-width: 44rem; }
}

.lidar-candidate-outline {
  fill: color-mix(in srgb, var(--focus) 24%, var(--surface));
  stroke: var(--focus);
  stroke-width: 2;
}

.guided-lidar-viewer { margin: 1rem 0; }

.guided-lidar-stage {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: .75rem;
  padding: 1rem;
}

.guided-lidar-roof > .guided-roof-status { margin-top: .8rem; }

.roof-view-header {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  justify-content: space-between;
}

.roof-view-tabs {
  background: color-mix(in srgb, var(--surface) 88%, var(--line));
  border-radius: .55rem;
  display: inline-flex;
  gap: .2rem;
  padding: .2rem;
}

.roof-view-tabs button {
  background: transparent;
  border: 0;
  border-radius: .4rem;
  color: var(--ink);
  padding: .5rem .7rem;
}

.roof-view-tabs button[aria-selected="true"] {
  background: var(--surface);
  box-shadow: 0 1px 4px color-mix(in srgb, var(--ink) 18%, transparent);
  font-weight: 750;
}

.roof-view-viewport { min-height: 26rem; }
.roof-view-viewport svg { display: block; height: auto; max-height: 32rem; width: 100%; }
.roof-plan-face { fill: color-mix(in srgb, var(--focus) 12%, var(--surface)); stroke: var(--ink); }
.roof-plan-module { fill: #173d56; stroke: #8bc7ea; }
.roof-plan-module-highlighted { fill: #ffc45f; stroke: #723800; stroke-width: 3; }
.roof-plan-keep-out { fill: color-mix(in srgb, var(--amber) 34%, transparent); stroke: var(--amber); }
.roof-plan-object { fill: color-mix(in srgb, var(--red) 40%, var(--surface)); stroke: var(--red); }
.roof-plan-viewer[data-roof-plan-drawing] [data-roof-plan] { cursor: crosshair; touch-action: none; max-height: none; }
.roof-plan-draft { fill: color-mix(in srgb, var(--focus) 28%, transparent); stroke: var(--focus); stroke-width: 2; stroke-dasharray: 6 4; pointer-events: none; }

.native-inverter-face { border: 1px solid var(--line); border-radius: .7rem; margin: .85rem 0; padding: .8rem; }
.native-inverter-face h5 { margin: .1rem 0 .5rem; }
.native-inverter-face > .guided-roof-form > [data-native-inverter-group-create] {
  grid-column: 1 / -1;
  justify-self: start;
  align-self: start;
  min-height: 0;
  padding: .55rem 1rem;
}
.native-inverter-face > .guided-roof-form > .muted { grid-column: 1 / -1; margin: 0; }
.native-inverter-face [data-native-inverter-coverage] { margin: .65rem 0; font-weight: 650; }
.native-inverter-row { border-left: .25rem solid var(--focus); margin: .7rem 0; padding: .55rem .7rem; }
.native-inverter-row > p,
.native-inverter-row > button { grid-column: 1 / -1; margin: .1rem 0; }
.native-inverter-row [data-native-inverter-range] { font-weight: 650; }
.native-inverter-row [data-native-inverter-preview] { justify-self: start; }

.guided-site-finder { display: grid; gap: .7rem; margin: 1rem 0; }
/* The manual-roof Site step is a two-column form. Give the aerial map its
   full working width; a half-width satellite thumbnail cannot be pinned. */
[data-native-site-form] > [data-native-site-finder] { grid-column: 1 / -1; min-width: 0; }
.guided-site-finder > h4,
.guided-site-finder > p,
.guided-site-map > p { margin: 0; }
.guided-site-address {
  background: color-mix(in srgb, var(--surface) 88%, var(--focus));
  border: 1px solid color-mix(in srgb, var(--line) 70%, var(--focus));
  border-radius: .65rem;
  color: var(--ink);
  font-weight: 720;
  padding: .8rem;
}
.guided-site-map { display: grid; gap: .65rem; margin-top: .35rem; }
.guided-site-map-primary {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: .65rem;
  display: grid;
  gap: .5rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding: .5rem;
  position: sticky;
  top: .4rem;
  z-index: 3;
}
.guided-site-map-primary .act { min-height: 44px; }
.guided-site-map-viewport {
  aspect-ratio: 3 / 2;
  background: color-mix(in srgb, var(--surface) 82%, black);
  border: 1px solid var(--line);
  border-radius: .7rem;
  cursor: grab;
  overflow: hidden;
  position: relative;
  touch-action: none;
}
.guided-site-map-viewport:active { cursor: grabbing; }
.guided-site-map-viewport img {
  display: block;
  height: 100%;
  object-fit: cover;
  user-select: none;
  width: 100%;
}
.guided-site-pin {
  color: #ff3b30;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .85));
  font-size: 2rem;
  line-height: 1;
  pointer-events: none;
  position: absolute;
  transform: translate(-50%, -50%);
}
.guided-site-bearing-overlay {
  height: 100%;
  left: 0;
  pointer-events: none;
  position: absolute;
  top: 0;
  width: 100%;
}
.guided-site-bearing-overlay[hidden] { display: none; }
.guided-site-bearing-overlay line {
  stroke: #ffe27a;
  stroke-width: 3;
  vector-effect: non-scaling-stroke;
}
.guided-site-bearing-overlay circle {
  fill: #ffe27a;
  stroke: #182b28;
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}
.guided-site-map-controls {
  display: grid;
  gap: .5rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.guided-site-map-controls .act { min-height: 44px; }
.guided-site-attribution { color: var(--muted); font-size: .72rem; }
.guided-site-advanced {
  border-top: 1px solid var(--line);
  margin-top: 1rem;
  padding-top: .8rem;
}
.guided-site-advanced > summary {
  color: var(--muted);
  cursor: pointer;
  font-weight: 680;
}

/* Project-bound map-first tracing canvas; it becomes the main Site workspace. */
.roof-site-canvas-shell { display: grid; gap: .7rem; min-width: 0; width: 100%; }
.roof-site-canvas-shell.expanded {
  background: var(--surface, #f8fbfa); inset: 0; overflow: auto;
  padding: 1rem; position: fixed; z-index: 9999;
}
.roof-site-canvas-shell.expanded .roof-site-canvas {
  aspect-ratio: auto; height: calc(100dvh - 12rem);
  max-height: none; min-height: 20rem;
}
.roof-site-canvas-shell > p { margin: 0; }
.roof-site-toolbar { display: flex; flex-wrap: wrap; gap: .45rem; }
.roof-site-toolbar .act { min-height: 44px; }
.roof-site-toolbar [aria-pressed="true"] { background: var(--focus); color: white; }
.roof-site-canvas {
  aspect-ratio: 3 / 2;
  background: #15242b;
  border: 1px solid var(--line);
  border-radius: .7rem;
  cursor: grab;
  max-height: 70vh;
  min-height: 28rem;
  overflow: hidden;
  position: relative;
  touch-action: none;
  user-select: none;
  width: 100%;
}
.roof-site-canvas[data-mode="draw"] { cursor: crosshair; }
.roof-site-canvas > img,
.roof-site-canvas > svg { height: 100%; left: 0; position: absolute; top: 0; width: 100%; }
.roof-site-canvas > img { object-fit: fill; pointer-events: none; }
.roof-site-canvas > svg { overflow: visible; pointer-events: none; }
.roof-site-outline { fill: none; stroke: #f9df76; stroke-width: 3; vector-effect: non-scaling-stroke; }
.roof-site-vertex {
  cursor: move; fill: #fff; pointer-events: all; stroke: #123f43;
  stroke-width: 3; vector-effect: non-scaling-stroke;
}
.roof-site-vertex.selected { fill: #f9df76; stroke-width: 4; }
.roof-site-attribution { color: var(--muted); }
.roof-site-status { min-height: 1.4em; }
.native-outline-plan {
  background: color-mix(in srgb, var(--surface, #fff) 80%, #b6dcd0);
  border: 1px solid var(--line, #c7d6d0);
  border-radius: .7rem;
  max-width: 38rem;
  padding: .5rem;
}
.native-outline-plan svg { display: block; height: auto; max-height: 16rem; width: 100%; }
.native-outline-corner { cursor: pointer; fill: #fff; pointer-events: all; stroke: #17644b; stroke-width: 2; }
.native-outline-corner.active { fill: #ffbd69; stroke: #a43f27; stroke-width: 4; }
.native-outline-plan text { pointer-events: none; }
[data-native-outline-editor] { container: roof-outline / inline-size; width: 100%; }
[data-native-outline-editor] > * { margin-block: .65rem; }
.native-outline-workspace { align-items: start; display: grid; gap: 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.native-outline-visual,.native-outline-controls { min-width: 0; }
.native-outline-controls { display: grid; gap: .75rem; }
.native-outline-controls .guided-roof-field { margin: 0; }
[data-native-outline-details] { border-top: 1px solid var(--line, #c7d6d0); padding-top: .5rem; }
[data-native-outline-corners] { display: grid; gap: .65rem; grid-template-columns: minmax(0, 1fr); }
[data-native-outline-corner] { display: grid; gap: .3rem .65rem; grid-template-columns: repeat(2, minmax(0, 1fr)); min-width: 0; }
[data-native-outline-corner] > strong { grid-column: 1 / -1; }
[data-native-outline-corner] > label { display: grid; gap: .25rem; min-width: 0; }
[data-native-outline-corner] input { box-sizing: border-box; min-width: 0; width: 100%; }
[data-native-outline-draft]:not([hidden]) { background: color-mix(in srgb, var(--surface, #fff) 84%, #d7e8da); border: 1px solid var(--line, #c7d6d0); border-radius: .6rem; margin-block: .6rem; padding: .7rem; }
[data-native-outline-draft] p { margin-block: 0 .5rem; }
@container roof-outline (max-width: 48rem) {
  .native-outline-workspace { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .roof-site-canvas { min-height: 20rem; }
}

/* The Office rail consumes screen width: size the studio to its available
   workspace, not only the browser viewport. Keep the large canvas readable
   below the controls when three columns would extend off-screen. */
@container roof-workspace (max-width: 60rem) {
  .guided-roof-builder:not(.results-only) { grid-template-columns: 10rem minmax(0, 1fr); }
  .guided-roof-canvas { grid-column: 2; }
  .guided-roof-status { grid-column: 2; }
}

@media (max-width: 1120px) {
  .guided-roof-builder { grid-template-columns: 10rem minmax(0, 1fr); }
  .guided-roof-canvas { grid-column: 2; }
  .guided-roof-status { grid-column: 2; }
}

@media (max-width: 760px) {
  .guided-roof-builder,
  .guided-roof-builder.results-only { grid-template-columns: minmax(0, 1fr); }
  .guided-roof-rail {
    display: flex;
    overflow-x: auto;
    position: static;
  }
  .guided-roof-rail li { min-width: max-content; }
  .guided-roof-canvas,
  .guided-roof-status { grid-column: 1; }
  .guided-roof-form.two-columns,
  .guided-roof-object-grid,
  .roof-elevation-grid,
  .roof-source-cards,
  .guided-lidar-candidates { grid-template-columns: minmax(0, 1fr); }
  .guided-roof-field input,
  .guided-roof-field select { font-size: 16px; }
}

.native-annual-printable { max-width: 1100px; margin-block: 1.5rem; }
.lidar-report-reading { width: 100%; }
.lidar-report-reading iframe { display: block; width: 100%; height: 72vh; min-height: 420px; border: 1px solid var(--line, #777); background: #fff; margin-top: 1rem; }

/* Keep the saved roof + bill join inside the light Roof & Solar workspace. */
.roof-usage-journey {
  display: grid;
  gap: .9rem;
  max-width: 66rem;
  align-content: start;
}
.roof-usage-journey > p[role="status"]:empty { display: none; }
.roof-usage-journey > section {
  background: color-mix(in srgb, var(--surface) 94%, var(--focus));
  border: 1px solid var(--line);
  border-radius: .7rem;
  display: grid;
  gap: .55rem;
  padding: 1rem;
}
.roof-usage-journey > section h4 { margin: 0 0 .25rem; }
.roof-usage-journey > section button { text-align: left; }
.roof-usage-journey .roof-usage-case-card {
  display: grid;
  gap: .3rem;
  text-align: left;
  white-space: normal;
  width: 100%;
}
.roof-usage-journey .roof-usage-case-card small {
  color: var(--muted);
  font-size: .9em;
  line-height: 1.4;
}
.roof-usage-journey button[aria-pressed="true"] {
  border-color: var(--focus);
  box-shadow: inset 0 0 0 1px var(--focus);
}
.roof-usage-journey > div {
  display: flex;
  flex-wrap: wrap;
  gap: .7rem;
}
.roof-usage-journey label:not(:has(input[type="checkbox"])) {
  display: grid;
  gap: .35rem;
  min-width: 12rem;
}
.roof-usage-journey label:has(input[type="checkbox"]) {
  align-items: start;
  display: flex;
  gap: .6rem;
}
.roof-usage-journey input[type="number"],
.roof-usage-journey input[type="text"],
.roof-usage-journey select {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: .45rem;
  color: var(--ink);
  font: inherit;
  min-height: 44px;
  padding: .55rem .7rem;
}
.roof-usage-journey dl { display: grid; gap: .6rem; margin: 0; }
.roof-usage-journey dl > div {
  border-bottom: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .5rem 1.5rem;
  padding: .35rem 0;
}
.roof-usage-journey dt { color: var(--muted); }
.roof-usage-journey dd { font-weight: 650; margin: 0; }
.roof-usage-journey details { min-width: 0; }
.roof-usage-report-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .8rem; }
.roof-usage-journey iframe {
  background: #fff;
  border: 1px solid var(--line);
  display: block;
  height: 80vh;
  min-height: 600px;
  margin-top: .7rem;
  width: 100%;
}
.roof-usage-journey .roof-usage-full-report {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: .75rem;
  box-sizing: border-box;
  height: 96vh;
  max-height: 96vh;
  max-width: 96vw;
  padding: .8rem;
  width: min(1100px, 96vw);
}
.roof-usage-journey .roof-usage-full-report::backdrop { background: rgba(12, 25, 21, .75); }
.roof-usage-journey .roof-usage-full-report[open] { display: flex; flex-direction: column; }
.roof-usage-journey .roof-usage-full-report iframe {
  flex: 1;
  height: auto;
  min-height: 0;
  margin-top: .7rem;
}
@media (max-width: 760px) {
  .roof-usage-journey > div { display: grid; }
  .roof-usage-journey label:not(:has(input[type="checkbox"])) { min-width: 0; }
  .roof-usage-journey iframe { min-height: 420px; }
}
[data-native-annual-controls] > label,
[data-native-storage-controls] > label { display: block; margin-block: .75rem; }
/* Secondary action styling must not override the shared disabled palette.
   Scope this to the usage workspace; other office modules keep their own rules. */
[data-native-storage-controls] button:disabled {
  background: var(--muted-bg);
  color: var(--muted-ink);
  border-color: var(--line);
  cursor: not-allowed;
}
[data-native-annual-review] > label { display: block; margin-block: .8rem; line-height: 1.45; }
[data-native-annual-review] > label:has(input[type="checkbox"]) {
  display: flex;
  align-items: flex-start;
  gap: .55rem;
}
[data-native-annual-review] > label > input[type="checkbox"] { flex: 0 0 auto; margin-top: .25rem; }
[data-native-annual-review] > label > input[type="text"] {
  display: block;
  box-sizing: border-box;
  margin-top: .35rem;
  max-width: 32rem;
  width: 100%;
}
[data-native-annual-assumption-set] {
  background: var(--surface, #f4f7f5);
  border-left: 3px solid var(--focus, #245b48);
  line-height: 1.5;
  padding: .7rem .9rem;
}
[data-native-annual-review] > [data-native-annual-run] { margin-top: .6rem; }
.native-annual-printable table { width: 100%; font-size: .85rem; border-collapse: collapse; }
.native-annual-printable td, .native-annual-printable th { padding: .45rem; border-bottom: 1px solid #ddd; text-align: left; overflow-wrap: anywhere; }
.native-annual-printable pre { white-space: pre-wrap; overflow-wrap: anywhere; }
@media print {
  body:has(.native-annual-printable) * { visibility: hidden; }
  .native-annual-printable, .native-annual-printable * { visibility: visible !important; }
  .native-annual-printable { position: absolute; inset: 0 auto auto 0; max-width: none; width: 100%; color: #111; background: #fff; }
  .native-annual-printable pre { display: block !important; font-size: 8pt; }
  .native-annual-printable h3 { break-after: avoid; }
  .native-annual-printable tr { break-inside: avoid; }
}