/* Shared UI contract for the project shell AND all three iframe documents.
   Loaded last in every entry point. Scoped, role-based !important rules retire
   the legacy preview overrides without changing technical SVG/model scaling. */
html body.planner-ui {
  --font-xs: var(--ws-font-meta);
  --font-sm: var(--ws-font-body);
  --font-body: var(--ws-font-body);
  --font-input: var(--ws-font-control);
  --font-title: var(--ws-font-title);
  --beta-control: var(--ws-control-height);
  font-family: var(--ws-font-family) !important;
  font-size: var(--ws-font-body) !important;
  line-height: 1.5 !important;
}

/* Reading, labels and actions share a scale; form values remain a distinct role. */
html body.planner-ui :is(p, label, summary, output, dt, dd, li) {
  font-size: var(--ws-font-body) !important;
  line-height: 1.5 !important;
}
html body.planner-ui :is(button, .primary, .secondary, .link-button, [role="button"]) {
  min-height: var(--ws-control-height) !important;
  font-family: var(--ws-font-family) !important;
  font-size: var(--ws-font-body) !important;
  line-height: 1.35 !important;
  font-weight: 700 !important;
  padding: 10px 14px !important;
  letter-spacing: normal !important;
  border-radius: 6px !important;
}
html body.planner-ui :is(button, .step) :is(b, strong, span) {
  font-size: inherit !important;
  line-height: inherit !important;
}
html body.planner-ui #clear-editor {
  min-height: var(--ws-control-height) !important;
  font-size: var(--ws-font-body) !important;
  padding: 10px 14px !important;
}
html body.planner-ui input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
html body.planner-ui select,
html body.planner-ui textarea {
  min-width: 0;
  max-width: 100%;
  min-height: var(--ws-control-height) !important;
  font-family: var(--ws-font-family) !important;
  font-size: var(--ws-font-control) !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  padding: 10px 12px !important;
  border-radius: 6px !important;
}
html body.planner-ui :is(input[type="checkbox"], input[type="radio"]) {
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  min-height: 18px !important;
  margin: 0 !important;
  padding: 0 !important;
  flex: 0 0 18px;
  accent-color: var(--ws-black);
}
html body.planner-ui input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
html body.planner-ui select {
  box-sizing: border-box !important;
  height: var(--ws-control-height) !important;
  line-height: 1.25 !important;
}
html body.planner-ui :is(button, input, select, textarea, summary, a):focus-visible {
  outline: 3px solid #a78000 !important;
  outline-offset: 3px !important;
}
html body.planner-ui [hidden] { display: none !important; }

/* Hierarchy is intentional: titles 24, sections 20, subsections 18, metadata 12. */
html body.planner-ui h2 {
  font-size: var(--ws-font-section) !important;
  line-height: 1.3 !important;
  letter-spacing: -.01em !important;
}
html body.planner-ui :is(h1, .section-head h2, .project-manager-head h2) {
  font-size: var(--ws-font-title) !important;
  font-weight: 750 !important;
  line-height: 1.25 !important;
  letter-spacing: -.015em !important;
}
html body.planner-ui :is(h3, .windload-head h3, .screen > h3) {
  font-size: var(--ws-font-subsection) !important;
  line-height: 1.35 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
}
html body.planner-ui legend {
  font-size: var(--ws-font-control) !important;
  line-height: 1.4 !important;
  font-weight: 700 !important;
}
html body.planner-ui :is(small, .eyebrow, .badge, .status-chip, .country-chip, .beta,
  .embedded-badge, .demo-label, .control-kicker, .context-label, .unit i,
  .editor-help, .canvas-help, .canvas-legend, .plan-legend, .legend,
  .canvas-head > span, .plan-head span, .windload-status, .save-state,
  .global-save-status, .fixed-data, .surface-result em, .field-error,
  .brand span, .app-context > span, .header-actions > span, .property-head > span,
  .product-card > span, .location-summary > span, .upload-pane > span,
  .section-title > span, .system-data article > span,
  .section-head > div > p:first-child, .planning-head small) {
  font-size: var(--ws-font-meta) !important;
  line-height: 1.45 !important;
  letter-spacing: normal !important;
}
html body.planner-ui :is(.step small, .steps small, .roof-tab small,
  .property-panel .tool-group > small, .metrics small, .metrics span,
  .result-status-grid small, .result-status-grid > article > span,
  .variant-grid small, .variant-grid em, .choice small, .planning-type span) {
  font-size: var(--ws-font-meta) !important;
  line-height: 1.45 !important;
}
html body.planner-ui :is(.product-card strong, .result-identity strong,
  .result-status-grid strong, .surface-result strong, .surface-card .badge,
  .planning-type strong, .variant-grid b, .choice b, .property-panel-head strong,
  .result-building strong, .result-building b, .facade-overview-card strong,
  .run-card strong, .segment-card strong, .field-card strong, .gate-card strong,
  .system-data strong, .editor-summary, .bom-row, .bom-table-row,
  .technical-table-row, .technical-table-row span, .bom-preview > *,
  .message, .validation, .validation-bar, .technical-warning, .result-note) {
  font-size: var(--ws-font-body) !important;
  line-height: 1.5 !important;
}
html body.planner-ui :is(.bom-warning, .blocked, .blocked b, .blocked span,
  .reference-note strong, .reference-note span, .next-stage strong, .next-stage span,
  .app-context strong, .context strong, .roof-manager strong,
  .location-summary strong, .windload-result strong,
  .master-building-geometry strong, .structural-status, .structural-table > div,
  .structural-metrics strong, .wall-toast) {
  font-size: var(--ws-font-body) !important;
  line-height: 1.5 !important;
}
html body.planner-ui :is(.metrics strong, .detail-metrics strong, .result-metrics strong) {
  font-size: var(--ws-font-section) !important;
  line-height: 1.3 !important;
}
html body.planner-ui :is(.bom-head, .bom-table-head, .technical-table-head span, .bom-preview .head) {
  font-size: var(--ws-font-meta) !important;
  line-height: 1.45 !important;
}
html body.planner-ui #quote-form label,
html body.planner-ui #quote-mail-status { font-size: var(--ws-font-body) !important; }
html body.planner-ui #quote-form :is(input, textarea) { font-size: var(--ws-font-control) !important; }

/* All ordinary field grids use the same two-column rhythm. Reserving a label
   row aligns controls even when a field also has an explanation or a unit. */
/* Paired sections share real grid rows, so a taller contact or error message
   moves both following sections together instead of staggering two columns. */
html body.planner-ui .project-form-groups {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  align-items: start;
}
html body.planner-ui .project-form-groups fieldset { margin: 0; }
html body.planner-ui .project-form-groups .form-grid > label { padding-bottom: 0; }
html body.planner-ui .project-form-groups .field-error { position: static; grid-row: 3; }
html body.planner-ui .early-wind-card .field-wide { grid-column: 1 / -1; }
html body.planner-ui :is(.grid.two, .grid.three, .project-grid, .field-grid,
  .field-grid.three, .project-form-groups .form-grid, .custom-module) {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: var(--ws-field-gap) 20px !important;
  align-items: start !important;
}
html body.planner-ui :is(.grid, .field-grid, .form-grid, .custom-module) > label {
  position: relative;
  display: grid;
  grid-template-rows: minmax(40px, max-content) minmax(44px, max-content) auto;
  align-content: start;
  gap: 6px !important;
  min-width: 0;
}
html body.planner-ui :is(.grid, .field-grid, .form-grid, .custom-module) > label > :is(input, select, .unit) {
  grid-row: 2;
  width: 100%;
  margin-top: 0 !important;
}
html body.planner-ui :is(.grid, .field-grid, .form-grid, .custom-module) > label > small { grid-row: 3; margin-top: 0 !important; }
html body.planner-ui .project-form-groups label > em { position: absolute; top: 21px; left: 0; }
@media (min-width: 1101px) {
  html body.planner-ui .project-form-groups .project-contact-fields {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}
html body.planner-ui .unit input { margin-top: 0 !important; padding-right: 58px !important; }
html body.planner-ui .unit i { top: 50% !important; right: 12px !important; transform: translateY(-50%) !important; }
html body.planner-ui .roof-template-action > button { grid-row: 2; width: 100%; margin: 0 !important; }
html body.planner-ui .manual-zone-toggle > span + span {
  grid-row: 2;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: var(--ws-control-height);
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: var(--ws-font-body) !important;
}

/* A choice has one frame, never a label frame around a second span frame. */
html body.planner-ui .layout-source-options > label,
html body.planner-ui .layout-source-options > label:has(input:checked) {
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
html body.planner-ui :is(.layout-source-options > label > span, .planning-mode-option > span, .orientation-card) {
  min-height: 84px !important;
  padding: 14px 16px !important;
  border: 1px solid #c4cdc7 !important;
  border-radius: 6px !important;
  background: #fff !important;
  box-shadow: none !important;
  font-size: var(--ws-font-body) !important;
}
html body.planner-ui :is(.layout-source-options, .planning-mode-options, .orientation-options) :is(b, strong) { font-size: var(--ws-font-body) !important; }
html body.planner-ui .layout-source-options input:checked + span,
html body.planner-ui .planning-mode-option:has(input:checked) > span,
html body.planner-ui .orientation-option:has(input:checked) .orientation-card {
  border-color: #252a27 !important;
  box-shadow: inset 3px 0 #ffe24d !important;
}
html body.planner-ui :is(.layout-source-options, .planning-mode-options, .orientation-options, .variant-grid) label:focus-within > span {
  outline: 3px solid #a78000;
  outline-offset: 3px;
}

/* Embedded editors keep their own System / Editor / Belegung steps, but not a
   second roof manager: the project shell already owns surfaces and their names. */
html body.planner-ui.project-master-embed .roof-manager { display: none !important; }
html body.planner-ui.project-master-embed :is(.app-shell, .planner-shell) { margin: 0 !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; }
html body.planner-ui.project-master-embed .screen { scroll-margin-top: 12px !important; }
html body.planner-ui.project-master-embed .editor-screen { height: auto !important; overflow: visible !important; }
html body.planner-ui.project-master-embed .early-wind-card { margin-top: 0 !important; padding-top: 0 !important; border-top: 0 !important; }
html body.planner-ui :is(.roof-actions, .plan-toolbar, .plan-toolbar > div, .layout-toolbar, .toolbar, .planning-head > div:last-child) {
  flex-wrap: wrap !important;
  gap: 8px !important;
}
html body.planner-ui :is(.editor-tool-rail .tool, .tool-rail button) {
  min-height: 68px !important;
  /* The 112px rail leaves a 94px button: keep 84px for complete 14px labels. */
  padding: 10px 4px !important;
  white-space: normal !important;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}
html body.planner-ui .editor-planner { grid-template-columns: 112px minmax(0, 1fr); }
html body.planner-ui .tool-rail { width: 112px; }
html body.planner-ui .tool-rail i { font-size: var(--ws-font-section) !important; }
html body.planner-ui .editor-layout:has(> .tool-rail) { grid-template-columns: 112px minmax(0, 1fr) minmax(280px, 320px); }
html body.planner-ui .placement-controls { grid-template-columns: repeat(2, minmax(0, 1fr)); }
html body.planner-ui .editor-grid:has(.selection-properties:not([hidden])) { display: grid !important; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; }
html body.planner-ui .selection-properties { position: static; width: auto; max-height: 70vh; margin: 0; }
html body.planner-ui .viewer-3d-info dl div { grid-template-columns: minmax(0, 1fr); gap: 4px; }
html body.planner-ui .viewer-3d-info dt { font-size: var(--ws-font-meta) !important; }
html body.planner-ui :is(.actions, .result-actions, .placement-actions, .document-actions, .editor-master-nav) { flex-wrap: wrap; gap: 8px; }
/* Wall editor screens use 16px insets, unlike the 28px System screen. */
html body.planner-ui .planner-shell .editor-screen > .actions {
  margin-inline: -16px;
  padding-inline: 16px;
}

/* Only the master owns the viewport. Its editor receives the space left after
   the real header, feedback and footer heights, including wrapped actions.
   Embedded editor bodies also use data-step="3", so the shell class is vital. */
html body.planner-ui.project-master-shell[data-step="3"] {
  height: 100dvh;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
html body.planner-ui.project-master-shell[data-step="3"] > .topbar {
  position: static;
  flex-shrink: 0;
}
html body.planner-ui.project-master-shell[data-step="3"] > main {
  display: grid;
  flex: 1 1 0;
  grid-template-columns: var(--nav) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  align-items: stretch;
  width: 100%;
  max-width: 1780px;
  height: auto;
  min-height: 0;
  margin: 0 auto;
  padding: 18px 20px;
  overflow: hidden;
}
html body.planner-ui.project-master-shell[data-step="3"] > main > .steps {
  display: flex;
  max-height: 100%;
  overflow: auto;
}
html body.planner-ui.project-master-shell[data-step="3"] .workspace,
html body.planner-ui.project-master-shell[data-step="3"] .planning-screen.active {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  height: auto;
  min-height: 0;
  overflow: hidden;
}
html body.planner-ui.project-master-shell[data-step="3"] .planning-screen.active { padding: 0; }
html body.planner-ui.project-master-shell[data-step="3"] .planning-head {
  position: static;
  top: auto;
  z-index: auto;
  display: grid;
  grid-template-columns: minmax(140px, 180px) minmax(180px, 1fr) auto;
  flex-shrink: 0;
  align-items: center;
  gap: 12px;
}
html body.planner-ui.project-master-shell[data-step="3"] .planning-head > div:first-child {
  min-width: 0;
  overflow-wrap: anywhere;
}
html body.planner-ui.project-master-shell[data-step="3"] .planning-head select {
  width: 100%;
  min-width: 0;
  max-width: none;
  order: 0;
}
html body.planner-ui.project-master-shell[data-step="3"] .planning-head > div:last-child {
  width: auto;
  min-width: 0;
  justify-content: flex-end;
}
html body.planner-ui.project-master-shell[data-step="3"] :is(.project-feedback, .editor-sync-message) {
  position: static;
  flex-shrink: 0;
}
html body.planner-ui.project-master-shell[data-step="3"] #surface-editor {
  flex: 1 1 0;
  height: auto;
  min-height: 0;
}
html body.planner-ui.project-master-shell[data-step="3"] .editor-placeholder {
  min-height: 0;
  margin: 16px auto;
  overflow: auto;
}
html body.planner-ui.project-master-shell[data-step="3"] > .legal-footer {
  position: static;
  flex-shrink: 0;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 6px 16px;
  gap: 8px;
}

@media (max-width: 1100px) {
  html body.planner-ui.project-master-shell[data-step="3"] .planning-head {
    grid-template-columns: minmax(140px, 180px) minmax(180px, 1fr);
  }
  html body.planner-ui.project-master-shell[data-step="3"] .planning-head > div:last-child {
    grid-column: 1 / -1;
  }
  html body.planner-ui .project-form-groups { grid-template-columns: 1fr; }
  html body.planner-ui .placement-controls { grid-template-columns: 1fr; }
  html body.planner-ui .editor-layout:has(> .tool-rail) { grid-template-columns: 112px minmax(0, 1fr); }
  html body.planner-ui .editor-layout > .properties { grid-column: 1 / -1; }
  html body.planner-ui .editor-grid:has(.selection-properties:not([hidden])) { grid-template-columns: 1fr; }
  html body.planner-ui .selection-properties { max-height: none; }
  html body.planner-ui .system-grid { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  html body.planner-ui .planner-shell .editor-screen > .actions {
    margin-inline: -8px;
    padding-inline: 8px;
  }
}
@media (max-width: 1000px) {
  html body.planner-ui.project-master-shell[data-step="3"] > main {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    padding: 8px;
  }
  html body.planner-ui.project-master-shell[data-step="3"] > main > .steps {
    max-height: none;
    overflow-x: auto;
    overflow-y: hidden;
  }
}
@media (max-width: 700px) {
  html body.planner-ui.project-master-shell[data-step="3"] .planning-head {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }
  html body.planner-ui.project-master-shell[data-step="3"] .planning-head > div:last-child {
    justify-content: flex-start;
  }
  html body.planner-ui :is(.grid.two, .grid.three, .project-grid, .field-grid,
    .field-grid.three, .project-form-groups .form-grid, .custom-module) { grid-template-columns: 1fr !important; }
  html body.planner-ui :is(.layout-source-options, .planning-mode-options, .orientation-options, .system-data) { grid-template-columns: 1fr !important; }
  html body.planner-ui :is(.editor-tool-rail, .tool-rail) { width: auto; flex-direction: row; }
  html body.planner-ui :is(.editor-tool-rail .tool, .tool-rail button) { flex: 0 0 112px; }
  html body.planner-ui .editor-layout:has(> .tool-rail) { display: flex; flex-direction: column; }
  html body.planner-ui .editor-planner { display: flex; flex-direction: column; }
  html body.planner-ui .fence-head { height: auto; min-height: 62px; gap: 8px; }
}

/* Unified project shell: the same compact top stepper stays visible on every
   parent page; embedded roof pages never render a second navigation layer. */
html body.planner-ui.project-master-shell {
  --header: 58px;
  background: #f4f6f8;
}
html body.planner-ui.project-master-shell > .topbar {
  height: var(--header);
  padding: 0 24px;
  background: #fff;
  color: #233048;
  border-bottom: 1px solid #dde3ea;
  box-shadow: none;
}
html body.planner-ui.project-master-shell > .topbar .brand img { filter: none; width: 106px; }
html body.planner-ui.project-master-shell > .topbar :is(.brand,.context strong) { color: #233048; }
html body.planner-ui.project-master-shell > main {
  width: 100%; max-width: none; min-height: 0;
  margin: 0; padding: 0 18px 28px; display: grid;
  grid-template-columns: 1fr; grid-template-rows: 58px minmax(0,1fr); gap: 10px;
}
html body.planner-ui.project-master-shell > main > .steps {
  position: sticky; z-index: 80; top: var(--header); width: 100%;
  height: 58px; margin: 0; padding: 5px 8px; display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: center; gap: 8px;
  background: #fff; border: 0; border-radius: 0;
}
html body.planner-ui.project-master-shell > main > .steps::before {
  content: ""; position: absolute; left: 8%; right: 8%; top: 23px; height: 1px; background: #d9e1ea;
}
html body.planner-ui.project-master-shell > main > .steps button {
  z-index: 1; width: 100%; min-width: 0; min-height: 46px; padding: 4px 8px;
  display: grid; grid-template-columns: 28px 1fr; gap: 8px; align-items: center;
  background: #fff; border: 0; color: #26344b; text-align: left;
}
html body.planner-ui.project-master-shell > main > .steps button b {
  width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%;
  background: #99a5b4; color: #fff; font-size: 11px;
}
html body.planner-ui.project-master-shell > main > .steps button.active { background:#fff; color:#145fd7; }
html body.planner-ui.project-master-shell > main > .steps button.active::before { display:none; }
html body.planner-ui.project-master-shell > main > .steps button.active b { background:#1d65e5; color:#fff; }
html body.planner-ui.project-master-shell > main > .steps button small { color:#667386; font-size:var(--ws-font-meta); white-space:nowrap; }
html body.planner-ui.project-master-shell > main > .workspace {
  width: 100%; min-width: 0; border: 1px solid #dfe5eb; border-radius: 10px;
  background: #fff; box-shadow: 0 8px 28px rgba(31,45,61,.05); overflow: clip;
}
html body.planner-ui.project-master-shell .screen[data-screen="1"] { width:100%; max-width:1440px; min-height:0; margin:auto; padding:30px clamp(24px,4vw,64px) 90px; }
html body.planner-ui.project-master-shell .project-form-groups { grid-template-columns:repeat(2, minmax(0, 1fr)); gap:22px 34px; }

html body.planner-ui.project-master-embed :is(.app-shell,.planner-shell) { display:block!important; width:100%!important; max-width:none!important; padding:0 12px!important; }
html body.planner-ui.project-master-embed :is(.app-shell,.planner-shell) > .steps { display:none!important; }
html body.planner-ui.project-master-embed .screen[data-screen="1"] { width:100%!important; max-width:none!important; min-height:0!important; padding:18px 20px 76px!important; }
html body.planner-ui.project-master-embed .screen[data-screen="1"] > .section-head { margin-bottom:18px; }
html body.planner-ui.project-master-embed .screen[data-screen="1"] :is(.windload-inputs,.grid.two,.grid.three) { grid-template-columns:repeat(2, minmax(0, 1fr))!important; }

/* One compact selection-only rotation control. */
html body.planner-ui .module-rotation-group { display:inline-flex; align-items:center; gap:4px; padding-left:7px; border-left:1px solid #dce3e8; }
html body.planner-ui .module-rotation-group[hidden] { display:none!important; }
html body.planner-ui .module-rotation-group > b { padding:0 3px; color:#526174; font-size:var(--ws-font-meta); }
html body.planner-ui .module-rotation-group .rotation-target-label { height:32px; padding:0 6px; }
html body.planner-ui .module-rotation-group .rotation-target-label > span:first-child { color:#647184; font-size:var(--ws-font-meta); font-weight:700; }

/* Invalid geometry stays selectable and obvious without producing an
   unreadable red cell-grid cloud. The exact reason lives in the status bar. */
html body.planner-ui .pv-module.invalid .module-visible { fill:rgba(210,61,49,.12)!important; stroke:#c93b31!important; stroke-width:2.5!important; stroke-dasharray:6 3; }
html body.planner-ui .pv-module.invalid .module-hitbox { fill:transparent!important; stroke:transparent!important; }
html body.planner-ui .validation-bar.invalid { display:flex; align-items:center; gap:10px; }
html body.planner-ui .validation-bar.invalid strong { flex:0 0 auto; }
html body.planner-ui .validation-bar.invalid span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

@media(max-width:900px){
  html body.planner-ui.project-master-shell > main { padding:0 8px 16px; }
  html body.planner-ui.project-master-shell > main > .steps { width:100%; grid-template-columns:repeat(4,minmax(160px,1fr)); overflow-x:auto; gap:4px; }
  html body.planner-ui.project-master-shell > main > .steps::before { display:none; }
  html body.planner-ui.project-master-shell > main > .steps button { width:100%; }
  html body.planner-ui.project-master-shell .project-form-groups,
  html body.planner-ui.project-master-embed .screen[data-screen="1"] :is(.windload-inputs,.grid.two,.grid.three) { grid-template-columns:1fr!important; }
}

/* One roof canvas with compact system controls beside it. */
html body.planner-ui .plan-toolbar{display:flex!important;gap:16px;align-items:stretch;flex-wrap:wrap;background:#fff!important;border-radius:12px!important;padding:12px!important;margin-bottom:10px!important}
html body.planner-ui .plan-toolbar .plan-tools-group{display:flex;flex:1 1 auto;flex-direction:column;gap:7px;min-width:190px}
html body.planner-ui .plan-toolbar .plan-tools-group+ .plan-tools-group{border-left:1px solid #d8e4de;padding-left:15px}
html body.planner-ui .plan-toolbar .plan-tools-group>small{font-size:11px;font-weight:800;color:#64756d;letter-spacing:.06em}
html body.planner-ui .plan-toolbar .plan-tools-group>div{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
html body.planner-ui .plan-toolbar button,html body.planner-ui .plan-toolbar .module-snap-toggle{min-height:37px!important;border-radius:8px!important;font-size:11px!important}
html body.planner-ui .plan-toolbar .plan-more{position:relative;font-size:11px}
html body.planner-ui .plan-toolbar .plan-more>summary{cursor:pointer;padding:10px;border:1px solid #d8e4de;border-radius:8px;background:white;list-style:none}
html body.planner-ui .plan-toolbar .plan-more[open]{z-index:5}
html body.planner-ui .plan-toolbar .plan-more>button{display:block;margin-top:5px;width:100%}
html body.planner-ui .roof-occupancy-layout{display:grid;grid-template-columns:minmax(0,1fr) 310px;align-items:start;gap:12px}
html body.planner-ui .roof-occupancy-layout>.plan-card{border:1px solid #d8e4de!important;border-radius:12px!important;min-width:0}
html body.planner-ui .roof-occupancy-sidebar{border:1px solid #d8e4de;border-radius:12px;background:white;padding:16px;max-height:740px;overflow-y:auto;min-width:0}
html body.planner-ui .roof-occupancy-sidebar h3{margin:0 0 15px;font-size:15px}
html body.planner-ui .roof-occupancy-sidebar label{display:grid;gap:6px;margin:12px 0;font-size:11px;font-weight:700}
html body.planner-ui .roof-occupancy-sidebar select,html body.planner-ui .roof-occupancy-sidebar input[type=number]{width:100%;min-height:36px;border:1px solid #ccd9d1;border-radius:7px;padding:7px;background:white;font:inherit}
html body.planner-ui .roof-occupancy-sidebar button{min-height:35px;padding:7px 10px;border:1px solid #ccd9d1;border-radius:7px;background:white;color:#173d31;font:inherit;font-size:11px;cursor:pointer}
html body.planner-ui .roof-placement-type{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:7px}
html body.planner-ui .roof-placement-type button.active{border-color:#173d31;background:#173d31;color:#fff;box-shadow:inset 3px 0 #ffe24d}
html body.planner-ui .roof-selection-system{margin:12px 0;padding:10px;border:1px solid #d8e4de;border-radius:8px;background:#f6f9f7}
html body.planner-ui .roof-selection-system[hidden],html body.planner-ui .roof-selection-system [hidden]{display:none}
html body.planner-ui .roof-selection-system>button{width:100%;font-weight:800}
html body.planner-ui .roof-selection-system-controls>div{display:grid;grid-template-columns:1fr 1fr;gap:7px}
html body.planner-ui .roof-system-actions{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0}
html body.planner-ui #roof-field-summary{font-size:11px;line-height:1.5;color:#43524a}
html body.planner-ui #roof-field-summary ul{list-style:none;padding:0;margin:8px 0}
html body.planner-ui #roof-field-summary li{border-top:1px solid #e7ede9;padding:7px 0}
html body.planner-ui .roof-snap-properties,html body.planner-ui .plan-advanced{border-top:1px solid #d8e4de;margin-top:15px;padding-top:16px}
html body.planner-ui .roof-snap-properties p{font-size:11px;color:#64756d}
html body.planner-ui .roof-snap-properties label,html body.planner-ui .plan-advanced label{display:flex;align-items:center;gap:7px}
html body.planner-ui .system-snap-preview{pointer-events:none}html body.planner-ui .system-snap-preview line{stroke:#087b50;stroke-width:2;stroke-dasharray:7 5;vector-effect:non-scaling-stroke}html body.planner-ui .system-snap-preview text{fill:#07633d;font-size:12px;font-weight:800;paint-order:stroke;stroke:white;stroke-width:4px}
html body.planner-ui .plan-advanced details{font-size:11px;margin-top:10px}
html body.planner-ui .plan-advanced details>*{margin-top:7px}
@media(max-width:930px){html body.planner-ui .roof-occupancy-layout{grid-template-columns:1fr}html body.planner-ui .roof-occupancy-sidebar{max-height:none}html body.planner-ui .plan-toolbar .plan-tools-group{border-left:0!important;padding-left:0!important}}
html body.planner-ui select,
html body.planner-ui input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
html body.planner-ui textarea { font-size: var(--ws-font-control) !important; }

/* Clean technical workspace, v3.41. The final layer keeps every function
   visible while giving drawing space and field values priority. */
html body.planner-ui {
  color: var(--ws-text) !important;
  background: var(--ws-surface) !important;
}
html body.planner-ui :is(.app-shell, .planner-shell, .workspace, .screen, .planning-screen) {
  border-color: var(--ws-border) !important;
}
html body.planner-ui :is(.app-shell, .planner-shell, .project-manager, .screen, .panel,
  .canvas-card, .canvas-panel, .properties, .property-panel, .result-card,
  .result-plan, .viewer-3d-stage, .viewer-3d-info, .technical-panel) {
  border-radius: var(--ws-radius-lg) !important;
  box-shadow: var(--ws-shadow) !important;
}
html body.planner-ui :is(.tool-group, .metric, .metrics article, .surface-card,
  .status-card, .system-data article, .windload-card, .result-note, .data-note,
  .validation-bar, .project-feedback, .editor-sync-message) {
  border-radius: var(--ws-radius) !important;
  border-color: var(--ws-border) !important;
  box-shadow: none !important;
}
html body.planner-ui :is(button, .primary, .secondary, .link-button, [role="button"],
  input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select, textarea) {
  border-radius: 9px !important;
}
html body.planner-ui :is(button, .primary, .secondary, .link-button, [role="button"]) {
  min-height: 38px !important;
  padding: 8px 12px !important;
}
html body.planner-ui :is(button.primary, .primary) {
  color: #171917 !important;
  background: var(--ws-gold) !important;
  border-color: #e2c82f !important;
  box-shadow: none !important;
}
html body.planner-ui :is(button.primary, .primary):hover { background: var(--ws-gold-hover) !important; }
html body.planner-ui :is(button.secondary, .secondary, .tool-action) {
  color: #242925 !important;
  background: #fff !important;
  border-color: #cfd5d1 !important;
  box-shadow: none !important;
}
html body.planner-ui :is(button.secondary, .secondary, .tool-action):hover { background: #f0f2f1 !important; }
html body.planner-ui :is(.step.active, .tool.active, .tool-rail button.active, .editor-tool-rail .tool.active) {
  color: #171917 !important;
  background: #fff8c9 !important;
  border-color: #d8c35b !important;
  box-shadow: inset 3px 0 var(--ws-gold) !important;
}
html body.planner-ui :is(.topbar, .planning-head, .section-head, .property-head,
  .canvas-head, .plan-head, .fence-head, .result-section-nav) {
  border-color: var(--ws-border) !important;
}

/* Roof editor: the primary tools form a compact workbar above the canvas.
   Keeping only the technical properties at the side gives the drawing area
   materially more room without hiding or removing any function. */
html body.planner-ui .editor-screen > .editor-layout:has(> .editor-tool-sidebar) {
  display: grid !important;
  grid-template-columns: minmax(560px, 1fr) minmax(255px, 285px) !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  gap: 8px 12px !important;
  min-height: 570px;
  align-items: stretch !important;
}
html body.planner-ui .editor-tool-sidebar {
  grid-column: 1;
  grid-row: 1;
  min-width: 0;
  padding: 0 !important;
  overflow: visible;
  border: 1px solid var(--ws-border);
  border-radius: var(--ws-radius-lg);
  background: #f8f9f8;
  box-shadow: var(--ws-shadow);
}
html body.planner-ui .editor-properties {
  grid-column: 2;
  grid-row: 1 / 3;
  min-width: 0;
  max-height: calc(100dvh - 205px);
  padding: 8px;
  overflow: auto;
  border: 1px solid var(--ws-border);
  border-radius: var(--ws-radius-lg);
  background: #f8f9f8;
  box-shadow: var(--ws-shadow);
}
html body.planner-ui .editor-screen > .editor-layout:has(> .editor-tool-sidebar) > .canvas-card {
  grid-column: 1;
  grid-row: 2;
}
html body.planner-ui :is(.editor-tool-sidebar, .editor-properties) .tool-group {
  margin: 0 0 8px !important;
  padding: 10px !important;
  background: #fff !important;
}
html body.planner-ui :is(.editor-tool-sidebar, .editor-properties) .tool-group:last-child { margin-bottom: 0 !important; }
html body.planner-ui :is(.editor-tool-sidebar, .editor-properties) .tool-group > small {
  display: block;
  margin-bottom: 8px;
  color: #747c77 !important;
  font-size: 11px !important;
  font-weight: 800;
  letter-spacing: .075em !important;
}
html body.planner-ui .editor-tool-sidebar .tool {
  width: auto;
  min-width: max-content;
  min-height: 40px !important;
  margin: 0;
  padding: 7px 10px !important;
  justify-content: flex-start;
  text-align: left;
  white-space: nowrap;
}
html body.planner-ui .editor-tool-sidebar .tool-group {
  min-width: 0;
  width: 100%;
  margin: 0 !important;
  padding: 7px !important;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  border: 0 !important;
  background: transparent !important;
}
html body.planner-ui .editor-tool-sidebar .tool-group > small {
  margin: 0 3px 0 2px !important;
  white-space: nowrap;
}
html body.planner-ui .editor-tool-sidebar .editor-toggle {
  min-width: max-content;
  margin: 0 2px;
  padding: 6px 8px;
  border-radius: 8px;
  background: #f1f3f2;
}
html body.planner-ui .editor-tool-sidebar .editor-toggle small { display: none; }
html body.planner-ui .editor-tool-sidebar .roof-point-selection {
  min-width: max-content;
  display: flex;
  align-items: center;
  gap: 6px;
}
html body.planner-ui .editor-tool-sidebar .roof-point-selection button { min-height: 40px !important; }
html body.planner-ui .editor-tool-sidebar .roof-edit-actions {
  min-width: max-content;
  display: flex;
  align-items: center;
  gap: 4px;
}
html body.planner-ui .editor-tool-sidebar .roof-edit-actions button { min-height: 40px !important; margin: 0 !important; }
html body.planner-ui .editor-properties :is(label, input:not([type="checkbox"]):not([type="radio"]), select) { font-size: 13px !important; }
html body.planner-ui .editor-properties :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select) { min-height: 36px !important; height: 36px !important; }
html body.planner-ui .editor-properties .object-list { display: grid; gap: 8px; }
html body.planner-ui #clear-editor {
  min-height: 34px !important;
  padding: 6px 10px !important;
  color: var(--ws-error) !important;
  background: transparent !important;
}

/* Aerial actions are two readable groups instead of one long row. */
html body.planner-ui .solar-imagery-toolbar {
  align-items: stretch !important;
  padding: 8px 10px !important;
  gap: 12px !important;
  border-left: 3px solid var(--ws-gold) !important;
  background: #f7f8f7 !important;
}
html body.planner-ui .solar-imagery-toolbar > div:first-child { justify-content: center; }
html body.planner-ui .solar-imagery-actions { gap: 8px !important; }
html body.planner-ui .solar-toolbar-group {
  display: grid;
  align-content: center;
  gap: 4px;
  padding-left: 10px;
  border-left: 1px solid var(--ws-border);
}
html body.planner-ui .solar-toolbar-group > small {
  color: #747c77 !important;
  font-size: 11px !important;
  font-weight: 850;
  letter-spacing: .08em !important;
}
html body.planner-ui .solar-toolbar-group > div { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; }
html body.planner-ui .solar-toolbar-group button { min-height: 32px !important; padding: 5px 8px !important; font-size: 12px !important; }
html body.planner-ui .solar-zoom-controls { padding: 2px !important; border-radius: 8px !important; }
html body.planner-ui .solar-zoom-controls output { font-size: 11px !important; }
html body.planner-ui .solar-toolbar-group label { font-size: 12px !important; }

/* Wall, fence and result workspaces retain their three-part structure at a
   usable density. */
html body.planner-ui :is(.editor-tool-rail, .tool-rail) { width: 78px !important; padding: 6px !important; }
html body.planner-ui :is(.editor-tool-rail .tool, .tool-rail button) {
  min-height: 54px !important;
  padding: 7px 3px !important;
  font-size: 11px !important;
}
html body.planner-ui .editor-planner { grid-template-columns: 78px minmax(0, 1fr) !important; }
html body.planner-ui .editor-layout:has(> .tool-rail) {
  grid-template-columns: 78px minmax(0, 1fr) minmax(255px, 285px) !important;
}
html body.planner-ui :is(.properties, .property-panel, .selection-properties, .viewer-3d-info) {
  max-height: calc(100dvh - 205px);
  overflow: auto;
}
html body.planner-ui .plan-toolbar { padding: 8px 10px !important; background: #f8f9f8 !important; }
html body.planner-ui .plan-toolbar button { min-height: 34px !important; padding: 6px 9px !important; font-size: 12px !important; }
html body.planner-ui .viewer-3d-info { width: min(285px, 30vw); }
html body.planner-ui .viewer-3d-info dl div { grid-template-columns: 42% minmax(0, 1fr) !important; gap: 8px; }
html body.planner-ui .viewer-3d-info dd { overflow-wrap: anywhere; }
html body.planner-ui .fence-head button { min-height: 34px !important; padding: 6px 9px !important; }

/* The six roof KPIs must stay visible inside the embedded project editor.
   The legacy preview stylesheet turns every metric strip into a non-wrapping
   flex row; restore the responsive grid used by the roof editor. */
html body.planner-ui.project-master-embed .manual-metrics {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 0 !important;
  overflow: visible !important;
}
html body.planner-ui.project-master-embed .manual-metrics > article {
  min-width: 0 !important;
  border-bottom: 1px solid var(--ws-border) !important;
}
html body.planner-ui.project-master-embed .manual-metrics > article:nth-child(3n) { border-right: 0 !important; }
html body.planner-ui.project-master-embed .manual-metrics > article:nth-last-child(-n + 3) { border-bottom: 0 !important; }

/* Belegungsarbeitsplatz: die Dachfläche und die Feld-Eigenschaften entsprechen
   der Hierarchie des Beta-Mockups. Die Kennzahlen sitzen bei den Eigenschaften. */
html body.planner-ui .screen[data-screen="3"] .plan-toolbar {
  display: grid !important;
  grid-template-columns: auto minmax(250px, 1fr) auto;
  align-items: start;
  gap: 14px;
  padding: 13px 16px !important;
  border: 1px solid #dce4ef !important;
  border-radius: 12px !important;
  background: #fff !important;
  box-shadow: 0 3px 14px #18345b0a;
}
html body.planner-ui .screen[data-screen="3"] .plan-toolbar .plan-tools-group {
  min-width: 0;
  gap: 8px;
}
@media (min-width: 1051px) {
  html body.planner-ui .screen[data-screen="3"] .plan-toolbar { grid-template-columns: minmax(500px, .9fr) minmax(620px, 1.1fr); gap: 9px 14px; }
  html body.planner-ui .screen[data-screen="3"] .plan-toolbar .plan-tools-group > div { flex-wrap: nowrap; gap: 4px; }
  html body.planner-ui .screen[data-screen="3"] .plan-toolbar .plan-tools-group:first-child > div { flex-wrap: wrap; }
  /* The editing block is exactly two compact rows: selection/actions above,
     rotation below. This keeps it inside the card without a bulky third row. */
  html body.planner-ui .screen[data-screen="3"] .plan-toolbar .plan-tools-group:nth-child(2) > div {
    display: grid;
    grid-template-columns: auto auto minmax(105px, 1fr) auto auto;
    grid-template-areas:
      "select scope summary duplicate remove"
      "rotation rotation rotation rotation rotation";
    align-items: center;
    gap: 5px;
    min-width: 0;
  }
  html body.planner-ui .screen[data-screen="3"] #plan-tool-select { grid-area: select; }
  html body.planner-ui .screen[data-screen="3"] .selection-scope-label { grid-area: scope; }
html body.planner-ui .screen[data-screen="3"] #module-selection-summary { grid-area: summary; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  html body.planner-ui .screen[data-screen="3"] #roof-duplicate { grid-area: duplicate; }
  html body.planner-ui .screen[data-screen="3"] #remove-modules { grid-area: remove; }
  html body.planner-ui .screen[data-screen="3"] .plan-toolbar .plan-tools-group:nth-child(2) button {
    min-height: 32px !important;
    padding: 5px 8px !important;
  }
  html body.planner-ui .screen[data-screen="3"] .plan-toolbar .plan-tools-group:nth-child(2) .selection-scope-label select {
    height: 32px;
    min-height: 32px;
  }
  html body.planner-ui .screen[data-screen="3"] .plan-toolbar .plan-tools-group:nth-child(2) .module-rotation-group {
    grid-area: rotation;
    min-width: 0;
    flex-wrap: nowrap;
    padding: 3px 0 0;
    border-left: 0;
    border-top: 1px solid #dce4ef;
  }
  html body.planner-ui .screen[data-screen="3"] .module-rotation-group .rotation-target-label {
    flex: 0 0 auto;
    min-width: 118px;
  }
  html body.planner-ui .screen[data-screen="3"] .module-rotation-group .rotation-target-label input {
    flex: 0 0 58px;
    width: 58px;
    min-width: 58px;
    height: 28px !important;
    min-height: 28px !important;
    margin-top: 0 !important;
    padding-block: 2px !important;
    box-sizing: border-box;
    text-align: center;
  }
  html body.planner-ui .screen[data-screen="3"] .plan-toolbar .plan-tools-group + .plan-tools-group { padding-left: 9px; }
  html body.planner-ui .screen[data-screen="3"] .plan-toolbar .plan-tools-group:last-child { grid-column: 1 / -1; padding-left: 0; border-left: 0; border-top: 1px solid #dce4ef; padding-top: 7px; }
  html body.planner-ui .screen[data-screen="3"] .plan-toolbar button,
  html body.planner-ui .screen[data-screen="3"] .plan-toolbar .module-snap-toggle,
  html body.planner-ui .screen[data-screen="3"] .plan-toolbar .plan-more > summary { padding-inline: 7px !important; font-size: 11px !important; }
}
html body.planner-ui .screen[data-screen="3"] .plan-toolbar .plan-tools-group > small {
  color: #233048;
  font-size: 12px;
  font-weight: 750;
  letter-spacing: 0;
  text-transform: none;
}
html body.planner-ui .screen[data-screen="3"] .plan-toolbar .plan-tools-group + .plan-tools-group {
  padding-left: 14px;
  border-left: 1px solid #dce4ef;
}
html body.planner-ui .screen[data-screen="3"] .plan-toolbar button,
html body.planner-ui .screen[data-screen="3"] .plan-toolbar .module-snap-toggle,
html body.planner-ui .screen[data-screen="3"] .plan-toolbar .plan-more > summary {
  min-height: 38px !important;
  padding: 8px 11px !important;
  border: 1px solid #d4ddea !important;
  border-radius: 8px !important;
  background: #fff !important;
  color: #233048 !important;
  font-size: 12px !important;
  font-weight: 700;
  white-space: nowrap;
}
html body.planner-ui .screen[data-screen="3"] .plan-toolbar button.active,
html body.planner-ui .screen[data-screen="3"] .plan-toolbar .module-snap-toggle:has(input:checked) {
  border-color: #1d65e5 !important;
  background: #eef4ff !important;
  color: #1256c5 !important;
}
html body.planner-ui .screen[data-screen="3"] .plan-toolbar button:disabled { opacity: .42; }
html body.planner-ui .screen[data-screen="3"] .roof-occupancy-layout {
  grid-template-columns: minmax(0, 1fr) 330px;
  gap: 14px;
}
html body.planner-ui .screen[data-screen="3"] .roof-occupancy-layout > .plan-card,
html body.planner-ui .screen[data-screen="3"] .roof-occupancy-sidebar {
  border: 1px solid #dce4ef !important;
  border-radius: 12px !important;
  background: #fff;
}
html body.planner-ui .screen[data-screen="3"] .roof-occupancy-sidebar {
  max-height: none;
  padding: 18px;
}
html body.planner-ui .screen[data-screen="3"] .roof-occupancy-sidebar h3 {
  color: #233048;
  font-size: 16px;
}
html body.planner-ui .screen[data-screen="3"] .roof-occupancy-sidebar .roof-sidebar-intro {
  margin: -6px 0 18px;
  color: #5d6b7e;
  font-size: 12px;
  line-height: 1.45;
}
html body.planner-ui .screen[data-screen="3"] .roof-occupancy-sidebar label {
  color: #34445e;
  font-size: 12px;
}
html body.planner-ui .screen[data-screen="3"] .roof-occupancy-sidebar .manual-metrics {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 7px !important;
  margin: 15px 0;
}
html body.planner-ui .screen[data-screen="3"] .roof-occupancy-sidebar .manual-metrics > article {
  min-width: 0;
  padding: 9px;
  border: 1px solid #e4eaf3 !important;
  border-radius: 8px !important;
  background: #f8faff !important;
}
html body.planner-ui .screen[data-screen="3"] .roof-occupancy-sidebar .manual-metrics strong { font-size: 17px !important; }
html body.planner-ui .screen[data-screen="3"] .roof-occupancy-sidebar .manual-metrics small { font-size: 10px !important; }
html body.planner-ui .screen[data-screen="3"] .roof-occupancy-sidebar .manual-metrics span { font-size: 10px !important; }
html body.planner-ui.project-master-embed[data-planner-step="3"] .app-shell {
  display: block !important;
  max-width: none !important;
  padding: 0 12px !important;
}
html body.planner-ui.project-master-embed[data-planner-step="2"] .app-shell { display: block !important; max-width: none !important; padding: 0 12px !important; }
html body.planner-ui.project-master-embed[data-planner-step="2"] .app-shell > .steps,
html body.planner-ui.project-master-embed[data-planner-step="2"] .screen[data-screen="2"] > .section-head { display: none !important; }
html body.planner-ui.project-master-embed[data-planner-step="2"] .app-shell > .panel { width: 100%; }
html body.planner-ui.project-master-embed[data-planner-step="2"] .screen[data-screen="2"] { padding: 10px 8px 70px !important; }
html body.planner-ui.project-master-embed[data-planner-step="3"] .app-shell > .steps { display: none !important; }
html body.planner-ui.project-master-embed[data-planner-step="3"] .screen[data-screen="3"] > .section-head { display: none !important; }
html body.planner-ui.project-master-embed[data-planner-step="3"] .app-shell > .panel { width: 100%; }
html body.planner-ui.project-master-embed[data-planner-step="3"] .screen[data-screen="3"] {
  padding: 10px 8px 70px !important;
}
html body.planner-ui .screen[data-screen="3"] #roof-fields-panel {
  display: block !important;
  width: 100%;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}
html body.planner-ui .screen[data-screen="3"] #roof-fields-panel > label {
  grid-template-columns: 100px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
}
html body.planner-ui .screen[data-screen="3"] #roof-fields-panel select,
html body.planner-ui .screen[data-screen="3"] #roof-fields-panel input[type=number] {
  margin: 0;
  min-width: 0;
}
html body.planner-ui .screen[data-screen="3"] .roof-occupancy-sidebar {
  padding: 18px 19px;
  color: #27334a;
}
html body.planner-ui .screen[data-screen="3"] .roof-occupancy-sidebar h3 {
  margin: 0 0 17px;
  font-size: 16px;
  letter-spacing: -.015em;
}
html body.planner-ui .screen[data-screen="3"] #roof-fields-panel > label,
html body.planner-ui .screen[data-screen="3"] #roof-fields-panel > .roof-property-row {
  display: grid !important;
  grid-template-columns: 102px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  min-height: 40px;
  margin: 0 0 6px;
  color: #536176;
  font-size: 12px;
  font-weight: 600;
}
html body.planner-ui .screen[data-screen="3"] #roof-fields-panel > label[hidden] { display: none !important; }
html body.planner-ui .screen[data-screen="3"] #roof-fields-panel :is(select, input[type=text], input[type=number]) {
  width: 100%;
  min-height: 34px !important;
  height: 34px !important;
  margin: 0 !important;
  padding: 5px 8px !important;
  border: 1px solid #d4ddea !important;
  border-radius: 7px !important;
  background: #fff !important;
  color: #233048;
  font-size: 12px !important;
  font-weight: 600;
}
html body.planner-ui .screen[data-screen="3"] #roof-fields-panel .roof-field-type {
  display: flex;
  min-height: 34px;
  padding: 3px;
  border: 1px solid #dbe2ed;
  border-radius: 20px;
  background: #f2f5f9;
}
html body.planner-ui .screen[data-screen="3"] #roof-fields-panel .roof-field-type button {
  flex: 1;
  min-height: 26px;
  padding: 3px 5px;
  border: 0;
  border-radius: 16px;
  background: transparent;
  color: #536176;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}
html body.planner-ui .screen[data-screen="3"] #roof-fields-panel .roof-field-type button.active {
  background: #087958;
  color: #fff;
  box-shadow: 0 1px 3px #102e2420;
}
html body.planner-ui .screen[data-screen="3"] #roof-fields-panel .roof-field-mode {
  margin: 2px 0 8px;
  padding: 7px 9px;
  border-radius: 7px;
  background: #edf8f4;
  color: #087958;
  font-size: 11px;
  font-weight: 750;
}
html body.planner-ui .screen[data-screen="3"] #roof-fields-panel .roof-field-add {
  width: 100%;
  min-height: 38px;
  margin: 0 0 10px;
  border: 1px solid #087958;
  border-radius: 8px;
  background: #087958;
  color: #fff;
  font-weight: 800;
}
html body.planner-ui .screen[data-screen="3"] #roof-fields-panel #roof-field-angle-state {
  grid-column: 2;
  color: #68768a;
  font-size: 10px;
}
html body.planner-ui .screen[data-screen="3"] #roof-fields-panel .roof-property-result output {
  display: block;
  padding: 6px 9px;
  border: 1px solid #e2e8f1;
  border-radius: 7px;
  background: #f8faff;
  color: #27334a;
  font-size: 12px;
  font-weight: 700;
}
html body.planner-ui .screen[data-screen="3"] .roof-snap-properties { margin-top: 17px; padding-top: 17px; }
html body.planner-ui .screen[data-screen="3"] .roof-snap-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
html body.planner-ui .screen[data-screen="3"] .roof-snap-title h3 { margin: 0; }
html body.planner-ui .screen[data-screen="3"] .roof-snap-properties p { margin: 8px 0 11px; line-height: 1.45; }
html body.planner-ui .screen[data-screen="3"] .roof-snap-title .roof-snap-switch,
html body.planner-ui .screen[data-screen="3"] .roof-snap-properties > label {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  color: #536176;
  font-size: 11px;
}
html body.planner-ui .screen[data-screen="3"] .roof-snap-switch input,
html body.planner-ui .screen[data-screen="3"] .roof-snap-properties > label input { width: 17px; height: 17px; margin: 0; accent-color: #1768e7; }
html body.planner-ui .screen[data-screen="3"] .roof-field-other,
html body.planner-ui .screen[data-screen="3"] .roof-totals {
  margin-top: 14px;
  padding-top: 13px;
  border-top: 1px solid #e2e8f1;
}
html body.planner-ui .screen[data-screen="3"] .roof-field-other > summary,
html body.planner-ui .screen[data-screen="3"] .roof-totals > summary {
  color: #334360;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
html body.planner-ui .screen[data-screen="3"] .roof-totals .manual-metrics { margin-top: 12px; }
html body.planner-ui .screen[data-screen="3"] #module-plan {
  height: min(65dvh, 650px) !important;
  max-height: none;
}
html body.planner-ui .screen[data-screen="3"] .pv-module.direction-south:not(.invalid) polygon { fill: #1f865e; stroke: #176c50; }
html body.planner-ui .screen[data-screen="3"] .pv-module.direction-south:not(.invalid) line { stroke: #b9e8d4; }
html body.planner-ui .screen[data-screen="3"] .pv-module.selected polygon {
  stroke: #ffcc22 !important;
  stroke-width: 5 !important;
  filter: drop-shadow(0 0 5px #ffb900);
}
@media (max-width: 1050px) {
  html body.planner-ui .screen[data-screen="3"] .plan-toolbar { grid-template-columns: 1fr 1fr; }
  html body.planner-ui .screen[data-screen="3"] .plan-toolbar .plan-tools-group:last-child { grid-column: 1 / -1; }
  html body.planner-ui .screen[data-screen="3"] .roof-occupancy-layout { grid-template-columns: minmax(0, 1fr) 290px; }
}
@media (max-width: 780px) {
  html body.planner-ui .screen[data-screen="3"] .plan-toolbar { grid-template-columns: 1fr; }
  html body.planner-ui .screen[data-screen="3"] .plan-toolbar .plan-tools-group { grid-column: 1 / -1; border: 0 !important; padding: 0 !important; }
  html body.planner-ui .screen[data-screen="3"] .roof-occupancy-layout { grid-template-columns: 1fr; }
}

html body.planner-ui.project-master-shell[data-step="3"] > .topbar {
  height: 62px;
  border-bottom: 1px solid #dce4ef;
  background: #fff;
  color: #233048;
  box-shadow: none;
}
html body.planner-ui.project-master-shell[data-step="3"] > .topbar .brand img { filter: none; }
html body.planner-ui.project-master-shell[data-step="3"] > .topbar .brand,
html body.planner-ui.project-master-shell[data-step="3"] > .topbar .context strong { color: #233048; }
html body.planner-ui.project-master-shell[data-step="3"] > main {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  gap: 8px;
  max-width: none;
  padding: 8px 16px;
  background: #f8faff;
  overflow: visible;
}
html body.planner-ui.project-master-shell[data-step="3"] > main > .steps {
  position: sticky;
  top: 62px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  width: 100%;
  gap: 8px;
  max-height: none;
  padding: 0 10px 8px;
  border: 0;
  background: transparent;
}
html body.planner-ui.project-master-shell[data-step="3"] > main > .steps button {
  display: flex;
  width: 100%;
  align-items: center;
  min-height: 40px;
  padding: 5px 8px;
  border-radius: 9px;
  background: transparent;
  color: #526176;
}
html body.planner-ui.project-master-shell[data-step="3"] > main > .steps button b {
  display: grid;
  flex: 0 0 29px;
  height: 29px;
  place-items: center;
  border-radius: 50%;
  background: #909bad;
  color: #fff;
}
html body.planner-ui.project-master-shell[data-step="3"] > main > .steps button.active {
  background: transparent;
  color: #1256c5;
}
html body.planner-ui.project-master-shell[data-step="3"] > main > .steps button.active b { background: #1d65e5; color: #fff; }
html body.planner-ui.project-master-shell[data-step="3"] > main > .steps button.active::before { display: none; }
html body.planner-ui.project-master-shell[data-step="3"] > main > .steps button small { font-size: 11px; color: #5d6b7e; }
@media (min-width: 1100px) {
  html body.planner-ui.project-master-shell[data-step="3"] > .topbar { height: 70px; }
  html body.planner-ui.project-master-shell[data-step="3"] > .topbar .context { display: none; }
  html body.planner-ui.project-master-shell[data-step="3"] > main { grid-template-rows: auto minmax(0, 1fr); }
  html body.planner-ui.project-master-shell[data-step="3"] > main > .steps {
    position: sticky !important;
    z-index: 90;
    top: 70px !important;
    left: auto;
    width: 100%;
    max-width: none;
    height: auto;
    transform: none;
    align-items: center;
    padding: 0 10px 8px;
    overflow: visible !important;
  }
  html body.planner-ui.project-master-shell[data-step="3"] > main > .steps button { width: 100%; }
}
html body.planner-ui.project-master-embed[data-planner-step="3"] .screen[data-screen="3"] > .actions {
  position: static !important;
  margin: 15px 0 0 !important;
  padding: 12px 0 !important;
  border-top: 1px solid #e2e8f1;
  background: #fff;
  box-shadow: none;
}
@media (max-width: 700px) {
  html body.planner-ui.project-master-shell[data-step="3"] > main { padding: 6px; }
  html body.planner-ui.project-master-shell[data-step="3"] > main > .steps { grid-template-columns: repeat(4, minmax(145px, 1fr)); overflow: auto; }
  html body.planner-ui.project-master-shell[data-step="3"] > main > .steps button { width: 100%; }
}

@media (max-width: 1180px) {
  html body.planner-ui .editor-screen > .editor-layout:has(> .editor-tool-sidebar) {
    grid-template-columns: minmax(500px, 1fr) 250px !important;
  }
  html body.planner-ui .solar-imagery-toolbar { flex-direction: column; }
  html body.planner-ui .solar-toolbar-group:first-child { padding-left: 0; border-left: 0; }
}
@media (max-width: 930px) {
  html body.planner-ui .editor-screen > .editor-layout:has(> .editor-tool-sidebar) {
    display: flex !important;
    flex-direction: column;
  }
  html body.planner-ui .editor-tool-sidebar { overflow: visible; }
  html body.planner-ui .editor-tool-sidebar .tool-group { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  html body.planner-ui .editor-tool-sidebar .tool-group > small,
  html body.planner-ui .editor-tool-sidebar .editor-toggle,
  html body.planner-ui .editor-tool-sidebar .roof-point-selection,
  html body.planner-ui .editor-tool-sidebar .roof-edit-actions { grid-column: 1 / -1; }
  html body.planner-ui .editor-properties { max-height: none; }
}
@media (max-width: 700px) {
  html body.planner-ui .editor-tool-sidebar .tool-group { grid-template-columns: 1fr; }
  html body.planner-ui .solar-toolbar-group { width: 100%; padding: 6px 0 0; border-left: 0; border-top: 1px solid var(--ws-border); }
  html body.planner-ui :is(.properties, .property-panel, .selection-properties, .viewer-3d-info) { width: auto; max-height: none; }
  html body.planner-ui.project-master-embed .manual-metrics { grid-template-columns: 1fr !important; }
  html body.planner-ui.project-master-embed .manual-metrics > article {
    border-right: 0 !important;
    border-bottom: 1px solid var(--ws-border) !important;
  }
  html body.planner-ui.project-master-embed .manual-metrics > article:last-child { border-bottom: 0 !important; }
}

/* Form values remain the strongest readable role after all workspace overrides. */
html body.planner-ui select,
html body.planner-ui input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
html body.planner-ui textarea { font-size: 15px !important; }
html body.planner-ui select,
html body.planner-ui input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]) {
  min-height: 40px !important;
  height: 40px !important;
}

/* Liveplaner V4 roof editor — presentation-only redesign. Existing element
   IDs and handlers stay in place so geometry and calculation logic remain the
   single source of truth. */
html body.planner-ui .roof-editor-redesign {
  grid-template-columns: minmax(580px, 1fr) minmax(270px, 300px) !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  gap: 16px !important;
}
html body.planner-ui .roof-editor-redesign > .editor-tool-sidebar {
  padding: 0 !important;
  border-radius: 12px !important;
  background: #fff !important;
  box-shadow: 0 5px 18px rgb(23 28 25 / 5%) !important;
}
html body.planner-ui .roof-workbar { display: grid; min-width: 0; }
html body.planner-ui .roof-tools-row,
html body.planner-ui .roof-selection-row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 12px 16px;
}
html body.planner-ui .roof-tools-row { flex-wrap: wrap; }
html body.planner-ui .roof-tools-row .roof-alignment-controls {
  display: flex; align-items: end; gap: 8px; margin-left: auto; padding-left: 10px;
  border-left: 1px solid #dfe4e8;
}
html body.planner-ui .roof-tools-row .roof-alignment-controls label { display: grid; gap: 4px; margin: 0; color: #5f6973; font-size: 11px; font-weight: 700; line-height: 1; }
html body.planner-ui .roof-tools-row .roof-alignment-controls select { width: 190px; min-height: 34px; height: 34px; padding: 0 28px 0 10px; border: 1px solid #d3d9de; border-radius: 8px; background: #fff; color: #20262c; font: 600 12px/1 system-ui,sans-serif; }
html body.planner-ui .roof-tools-row .roof-alignment-controls .rotation-input { display: flex; align-items: center; flex: 0 0 90px; width: 90px; min-width: 90px; min-height: 34px; box-sizing: border-box; border: 1px solid #d3d9de; border-radius: 8px; background: #fff; overflow: hidden; }
html body.planner-ui .roof-tools-row .roof-alignment-controls input { appearance: textfield; box-sizing: border-box; flex: 0 0 66px; min-width: 66px; width: 66px; height: 32px; padding: 0 2px 0 7px; border: 0; background: transparent; color: #20262c; font: 600 12px/1 system-ui,sans-serif; }
html body.planner-ui .roof-tools-row .roof-alignment-controls input::-webkit-inner-spin-button,
html body.planner-ui .roof-tools-row .roof-alignment-controls input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
html body.planner-ui .roof-tools-row .roof-alignment-controls i { color: #69737c; font-style: normal; font-size: 12px; }
html body.planner-ui .roof-tools-row .roof-alignment-controls button { min-height: 34px; height: 34px; padding: 0 12px; border: 1px solid #cbd3d9; border-radius: 8px; background: #fff; color: #20262c; font-weight: 700; white-space: nowrap; }
html body.planner-ui .roof-tools-row > small {
  margin-right: 4px;
  color: #68716c;
  font-size: 12px !important;
  font-weight: 800;
  letter-spacing: .05em !important;
}
html body.planner-ui .roof-tools-row .tool,
html body.planner-ui .roof-tools-row .icon-tool,
html body.planner-ui .roof-selection-row button,
html body.planner-ui .roof-tools-row .reset-roof {
  width: auto;
  min-width: 0;
  min-height: 42px !important;
  margin: 0 !important;
  padding: 8px 13px !important;
  border: 1px solid #d1d6d3 !important;
  border-radius: 10px !important;
  background: #fff !important;
  color: #1e2420 !important;
  box-shadow: none !important;
  white-space: nowrap;
}
html body.planner-ui .roof-tools-row .tool.active {
  border-color: #e9be26 !important;
  background: #ffd343 !important;
  box-shadow: none !important;
}
html body.planner-ui .roof-tools-row .icon-tool {
  width: 44px;
  padding-inline: 0 !important;
  font-size: 20px !important;
}
html body.planner-ui .roof-tools-row button:disabled,
html body.planner-ui .roof-selection-row button:disabled {
  color: #9da5a0 !important;
  background: #f6f7f6 !important;
  cursor: not-allowed;
  opacity: .72;
}
html body.planner-ui .workbar-divider,
html body.planner-ui .control-divider {
  width: 1px;
  height: 38px;
  margin-inline: 2px;
  background: #d9ddda;
  flex: 0 0 1px;
}
html body.planner-ui .roof-tools-row .editor-toggle,
html body.planner-ui .visibility-toggle {
  display: inline-flex !important;
  align-items: center;
  gap: 9px;
  min-width: 0;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  cursor: pointer;
  white-space: nowrap;
}
html body.planner-ui .roof-tools-row .editor-toggle input,
html body.planner-ui .visibility-toggle input {
  position: absolute;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}
html body.planner-ui .toggle-track {
  position: relative;
  width: 48px;
  height: 28px;
  border-radius: 999px;
  background: #cbd1cd;
  transition: background .18s ease;
  flex: 0 0 48px;
}
html body.planner-ui .toggle-track::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 4px rgb(0 0 0 / 20%);
  transition: transform .18s ease;
}
html body.planner-ui :is(.orthogonal-toggle, .visibility-toggle) input:checked + .toggle-track { background: #f7bf00; }
html body.planner-ui :is(.orthogonal-toggle, .visibility-toggle) input:checked + .toggle-track::after { transform: translateX(20px); }
html body.planner-ui :is(.orthogonal-toggle, .visibility-toggle) input:focus-visible + .toggle-track {
  outline: 3px solid #a78000;
  outline-offset: 3px;
}
html body.planner-ui .roof-tools-row .reset-roof {
  margin-left: auto !important;
  color: #a33c31 !important;
  background: transparent !important;
  border-color: transparent !important;
}
html body.planner-ui .roof-selection-row {
  border-top: 1px solid #e0e3e1;
  padding-block: 10px;
}
html body.planner-ui .roof-selection-row > strong { margin-right: 4px; }
html body.planner-ui .roof-selection-row #selected-roof-points {
  color: #66706a;
  font-size: 13px;
}
html body.planner-ui .roof-selection-row #delete-roof-point { margin-left: 8px !important; }

html body.planner-ui .info-tip {
  position: relative;
  z-index: 12;
  width: 22px;
  min-width: 22px !important;
  height: 22px;
  min-height: 22px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: #89928d !important;
  color: #fff !important;
  font: 800 13px/22px var(--ws-font-family) !important;
  text-align: center;
  cursor: help;
}
html body.planner-ui .roof-editor-redesign > .editor-properties {
  align-self: stretch;
  height: 100%;
  max-height: none;
  padding: 10px !important;
  border-radius: 12px !important;
  background: #fff !important;
  box-shadow: 0 5px 18px rgb(23 28 25 / 5%) !important;
}
html body.planner-ui .roof-editor-redesign .editor-properties .tool-group {
  padding: 14px !important;
  border: 0 !important;
  border-bottom: 1px solid #e1e4e2 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
html body.planner-ui .roof-editor-redesign .editor-properties .tool-group:last-child { border-bottom: 0 !important; }
html body.planner-ui .property-title,
html body.planner-ui .panel-title {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 12px;
}
html body.planner-ui .property-title > strong { font-size: 16px !important; color: #151b2d; }
html body.planner-ui .property-title > strong span { color: #4f5752; font-size: 13px !important; font-weight: 650; }
html body.planner-ui .obstacle-empty-state {
  display: grid;
  gap: 4px;
  margin-bottom: 14px;
  padding: 12px;
  border-radius: 9px;
  background: #f1f3f2;
  color: #7d8580;
}
html body.planner-ui .obstacle-empty-state strong { font-size: 13px !important; }
html body.planner-ui .obstacle-empty-state span { font-size: 12px !important; line-height: 1.45; }
html body.planner-ui .obstacle-properties.has-selection .obstacle-empty-state { display: none; }
html body.planner-ui .obstacle-properties:not(.has-selection) .object-list { display: grid; }
html body.planner-ui .obstacle-angle-control { margin-top: 15px; }
html body.planner-ui .angle-segments {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid #d3d8d5;
  border-radius: 9px;
}
html body.planner-ui .angle-segments button {
  min-width: 0;
  min-height: 38px !important;
  padding: 6px 3px !important;
  border: 0 !important;
  border-right: 1px solid #e0e3e1 !important;
  border-radius: 0 !important;
  background: #fff !important;
  color: #4b544f !important;
  font-size: 12px !important;
}
html body.planner-ui .angle-segments button:last-child { border-right: 0 !important; }
html body.planner-ui .angle-segments button[aria-pressed="true"] { background: #fff3b2 !important; color: #171b18 !important; }
html body.planner-ui .angle-segments button:disabled { background: #f3f4f3 !important; color: #a3aaa6 !important; cursor: not-allowed; }
html body.planner-ui .obstacle-angle-control > p { margin: 8px 0 0; color: #727b76; font-size: 11px !important; line-height: 1.45; }

html body.planner-ui .roof-editor-redesign > .canvas-card {
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
html body.planner-ui .roof-editor-redesign .canvas-head {
  min-height: 36px !important;
  padding: 4px 2px 8px !important;
  border: 0 !important;
  background: transparent !important;
}
html body.planner-ui .roof-foundation-panel,
html body.planner-ui .roof-view-panel {
  margin-bottom: 16px;
  padding: 20px 22px;
  border: 1px solid #d9dedb;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 5px 18px rgb(23 28 25 / 4%);
}

/* Compact viewport controls live on the canvas; rotation remains in the one workbar. */
html body.planner-ui .solar-canvas { position: relative; }
html body.planner-ui .canvas-view-controls {
  position: absolute; z-index: 12; top: 12px; left: 12px;
  display: grid; grid-template-columns: 38px; gap: 5px;
  padding: 5px; border: 1px solid #d9e0dc; border-radius: 10px;
  background: rgba(255,255,255,.94); box-shadow: 0 6px 20px rgba(20,32,25,.12);
  backdrop-filter: blur(12px);
}
html body.planner-ui .canvas-view-controls button {
  width: 38px; min-width: 38px; height: 36px; min-height: 36px; padding: 0;
  border: 0; border-radius: 7px; background: transparent; color: #24302a;
  font-size: 18px; cursor: pointer;
}
html body.planner-ui .canvas-view-controls button:hover,
html body.planner-ui .canvas-view-controls button.active { background: #edf3ef; color: #087d59; }
html body.planner-ui .canvas-view-controls button span { display: none; }
html body.planner-ui #roof-editor.focus-mode { cursor: crosshair; }
html body.planner-ui #roof-editor.pan-mode { cursor: grabbing; }
html body.planner-ui #module-plan.pan-mode { cursor: grab; }
html body.planner-ui .canvas-view-controls :is(#solar-pan-mode,#plan-map-pan,#solar-fit-imagery,#plan-map-imagery) {
  position: absolute; left: calc(100% + 8px); width: 132px; min-width: 132px;
  padding: 0 9px; display: flex; align-items: center; gap: 5px;
  background: rgba(255,255,255,.96); border: 1px solid #d9e0dc;
  box-shadow: 0 4px 12px rgba(20,32,25,.1); font-size: 11px;
}
html body.planner-ui .canvas-view-controls :is(#solar-pan-mode,#plan-map-pan) { top: 5px; }
html body.planner-ui .canvas-view-controls :is(#solar-fit-imagery,#plan-map-imagery) { top: 46px; }
html body.planner-ui .canvas-view-controls :is(#solar-pan-mode,#plan-map-pan,#solar-fit-imagery,#plan-map-imagery) span { display: inline; white-space: nowrap; }
html body.planner-ui .view-rotation-tools { display: inline-flex; gap: 4px; align-items: center; }
html body.planner-ui .view-rotation-tools button { min-height: 34px; padding: 6px 9px; white-space: nowrap; }

html body.planner-ui .plan-toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; }
/* Scroll the toolbar with the document so it cannot cover the roof canvas. */
html body.planner-ui .screen[data-screen="3"] .plan-toolbar {
  position: relative;
  top: 0;
  z-index: 30;
  align-self: start;
  margin-top: 0;
  background: rgba(255,255,255,.97) !important;
  backdrop-filter: blur(10px);
}
html body.planner-ui .plan-toolbar .plan-tools-group { min-width: 0; }
html body.planner-ui .plan-toolbar .plan-tools-group > div { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; }
html body.planner-ui .selection-scope-label { display: inline-flex; align-items: center; gap: 5px; margin: 0; }
html body.planner-ui .selection-scope-label select { width: auto; min-width: 86px; height: 34px; min-height: 34px; padding: 4px 24px 4px 8px; font-size: 12px; }
html body.planner-ui #module-selection-summary { min-width: 94px; color: #526159; font-size: 12px; white-space: nowrap; }
html body.planner-ui .screen[data-screen="3"] #module-selection-summary { font-size: 11px; font-variant-numeric: tabular-nums; }
html body.planner-ui .rotation-target-label { display: inline-flex; align-items: center; gap: 3px; margin: 0; padding: 0 7px; height: 34px; border: 1px solid #d9e0dc; border-radius: 7px; background: #fff; }
html body.planner-ui .rotation-target-label input { width: 48px; min-height: 28px; height: 28px; padding: 2px; border: 0; font-size: 12px; }
html body.planner-ui .module-selection-frame rect { fill: rgba(17,125,89,.045); stroke: #087d59; stroke-width: 2; stroke-dasharray: 7 4; pointer-events: none; }
html body.planner-ui .module-selection-frame circle { fill: #fff; stroke: #087d59; stroke-width: 2; pointer-events: none; }
html body.planner-ui .module-selection-frame text { fill: #075f45; font-size: 12px; font-weight: 750; paint-order: stroke; stroke: #fff; stroke-width: 4px; pointer-events: none; }
html body.planner-ui .plan-adopt-actions { position: sticky; z-index: 24; bottom: 8px; margin: 10px 0 14px !important; padding: 9px 10px !important; min-height: 54px; border: 1px solid #d9e0dc; border-radius: 10px; background: rgba(255,255,255,.96); box-shadow: 0 8px 28px rgba(20,32,25,.13); backdrop-filter: blur(14px); }
html body.planner-ui .plan-adopt-actions .primary { min-width: 210px; }

@media (max-width: 1180px) {
  html body.planner-ui .screen[data-screen="3"] .plan-toolbar {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    gap: 7px 10px;
  }
  html body.planner-ui .screen[data-screen="3"] .plan-toolbar .plan-tools-group { min-width: 0; }
  html body.planner-ui .screen[data-screen="3"] .plan-toolbar .plan-tools-group:last-child { grid-column: 1 / -1; }
  html body.planner-ui .screen[data-screen="3"] .plan-toolbar .plan-tools-group > div { flex-wrap: wrap; }
}
@media (max-width: 780px) {
  html body.planner-ui .screen[data-screen="3"] .plan-toolbar { grid-template-columns: minmax(0, 1fr); }
  html body.planner-ui .screen[data-screen="3"] .plan-toolbar .plan-tools-group { grid-column: 1 / -1; }
}
html body.planner-ui .panel-title { margin-bottom: 14px; }
html body.planner-ui .panel-title h3 { margin: 0 !important; font-size: 20px !important; color: #10182b; }
html body.planner-ui .solar-status-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  margin-bottom: 10px;
  padding: 4px 8px;
  border: 1px solid #d9dedb;
  border-radius: 10px;
  background: #f7f8f7;
}
html body.planner-ui .solar-status-row:has(#solar-imagery-status.valid) { border-color: #b9dfce; background: #edf9f3; }
html body.planner-ui .solar-status-row:has(#solar-imagery-status.error) { border-color: #edc0bb; background: #fff3f1; }
html body.planner-ui .solar-status-icon {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #8b948f;
  color: #fff !important;
  font-size: 13px !important;
  font-weight: 800;
}
html body.planner-ui .solar-status-row > div { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
html body.planner-ui .solar-status-row:has(#solar-imagery-status.valid) .solar-status-icon { background: #168b61; }
html body.planner-ui .solar-status-row:has(#solar-imagery-status.error) .solar-status-icon { background: #b6493e; }
html body.planner-ui .solar-status-row strong { flex: 0 0 auto; color: #174f3d; font-size: 12px !important; }
html body.planner-ui .solar-status-row #solar-imagery-status { min-width: 0; color: #5f6c66; font-size: 11px !important; line-height: 1.2; }
html body.planner-ui .solar-status-row #load-solar-imagery {
  min-height: 26px !important;
  padding: 2px 6px !important;
  font-size: 11px !important;
  border: 0 !important;
  background: transparent !important;
  color: #0f7752 !important;
}
html body.planner-ui .roof-action-label { display: block; margin-bottom: 10px; font-size: 14px !important; }
html body.planner-ui .roof-foundation-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
  gap: 10px;
}
html body.planner-ui .roof-foundation-actions button {
  width: 100%;
  min-height: 46px !important;
  margin: 0 !important;
  padding: 9px 12px !important;
  border-radius: 10px !important;
}
html body.planner-ui .roof-foundation-panel > p { margin: 12px 0 0; color: #68716c; font-size: 12px !important; }
html body.planner-ui .roof-view-controls { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
html body.planner-ui .roof-view-controls .solar-zoom-controls {
  display: inline-flex !important;
  gap: 5px;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}
html body.planner-ui .roof-view-controls .solar-zoom-controls[hidden],
html body.planner-ui .roof-view-controls [hidden] { display: none !important; }
html body.planner-ui .roof-view-controls button,
html body.planner-ui .roof-view-controls output {
  min-height: 42px !important;
  padding: 8px 12px !important;
  border: 1px solid #d2d7d4 !important;
  border-radius: 9px !important;
  background: #fff !important;
  color: #1c2420 !important;
  font-size: 13px !important;
}
html body.planner-ui .roof-view-controls button:disabled,
html body.planner-ui .roof-view-controls .visibility-toggle:has(input:disabled) {
  color: #9aa29d !important;
  background: #f3f4f3 !important;
  cursor: not-allowed;
  opacity: .76;
}
html body.planner-ui .roof-view-controls output { display: grid; place-items: center; min-width: 62px; }
html body.planner-ui .roof-view-controls .visibility-toggle { margin-left: auto !important; }
html body.planner-ui .roof-editor-redesign .solar-canvas {
  overflow: hidden;
  border: 1px solid #d1d7d3;
  border-radius: 12px 12px 0 0;
}
/* Drawing starts directly under the roof tools. Less frequent controls follow
   the canvas, while the property column scrolls independently. */
html body.planner-ui .screen[data-screen="2"] .roof-editor-redesign > .canvas-card { display: flex; flex-direction: column; min-width: 0; }
html body.planner-ui .screen[data-screen="2"] .roof-editor-redesign .canvas-head { order: 0; }
html body.planner-ui .screen[data-screen="2"] .roof-editor-redesign .solar-canvas { order: 1; }
html body.planner-ui .screen[data-screen="2"] .roof-editor-redesign .editor-live-metrics { order: 2; }
html body.planner-ui .screen[data-screen="2"] .roof-editor-redesign .roof-foundation-panel { order: 3; margin: 8px 0 0; padding: 10px 12px; }
html body.planner-ui .screen[data-screen="2"] .roof-editor-redesign .roof-view-panel { order: 4; margin: 8px 0 0; padding: 10px 12px; }
html body.planner-ui .screen[data-screen="2"] .roof-editor-redesign .canvas-legend { order: 5; }
html body.planner-ui .screen[data-screen="2"] .roof-editor-redesign :is(.roof-foundation-panel,.roof-view-panel) .panel-title { margin-bottom: 5px; }
html body.planner-ui .screen[data-screen="2"] .roof-editor-redesign :is(.roof-foundation-panel,.roof-view-panel) .panel-title h3 { font-size: 13px !important; }
html body.planner-ui .screen[data-screen="2"] .roof-editor-redesign .roof-foundation-actions { display: flex; gap: 7px; }
html body.planner-ui .screen[data-screen="2"] .roof-editor-redesign .roof-foundation-actions button { width: auto; min-height: 32px !important; }
html body.planner-ui .screen[data-screen="2"] .roof-editor-redesign .roof-action-label { display: none; }
html body.planner-ui .screen[data-screen="2"] .roof-editor-redesign .roof-selection-row { padding-block: 4px; }

/* The aerial-image and viewport controls belong with the other roof
   properties. JavaScript moves both existing panels into this column so all
   controls remain visible beside the drawing instead of below it. */
html body.planner-ui .screen[data-screen="2"] .roof-editor-redesign > .editor-properties :is(.roof-foundation-panel,.roof-view-panel) {
  margin: 0 !important;
  padding: 14px !important;
  border: 0 !important;
  border-bottom: 1px solid #e1e4e2 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
html body.planner-ui .screen[data-screen="2"] .roof-editor-redesign > .editor-properties :is(.roof-foundation-panel,.roof-view-panel) .panel-title h3 { font-size: 16px !important; }
html body.planner-ui .screen[data-screen="2"] .roof-editor-redesign > .editor-properties .roof-view-controls { display: grid; grid-template-columns: 1fr; }
html body.planner-ui .screen[data-screen="2"] .roof-editor-redesign > .editor-properties .roof-view-controls .solar-zoom-controls { display: grid !important; grid-template-columns: repeat(2,minmax(0,1fr)); }
html body.planner-ui .screen[data-screen="2"] .roof-editor-redesign > .editor-properties .roof-view-controls .solar-zoom-controls:first-child { grid-template-columns: repeat(2,minmax(0,1fr)); }
html body.planner-ui .screen[data-screen="2"] .roof-editor-redesign > .editor-properties .roof-view-controls .solar-zoom-controls:first-child output { grid-column: span 1; }
html body.planner-ui .screen[data-screen="2"] .roof-editor-redesign > .editor-properties .roof-view-controls .control-divider { display: none; }
html body.planner-ui .screen[data-screen="2"] .roof-editor-redesign > .editor-properties .roof-view-controls .visibility-toggle { margin-left: 0 !important; }

html body.planner-ui .screen[data-screen="3"] .plan-advanced {
  display: grid;
  gap: 9px;
  margin-top: 17px;
  padding-top: 17px;
  border-top: 1px solid #e2e8f1;
}
html body.planner-ui .screen[data-screen="3"] .plan-advanced h3 { margin: 0 0 2px; }
html body.planner-ui .screen[data-screen="3"] .plan-advanced > label { display: flex; grid-template-columns: none; align-items: center; gap: 8px; margin: 0; }
html body.planner-ui .screen[data-screen="3"] .plan-advanced > details { padding: 10px 0 0; border-top: 1px solid #e2e8f1; }

@media (max-width: 1260px) {
  html body.planner-ui .roof-editor-redesign { grid-template-columns: minmax(520px, 1fr) 260px !important; }
  html body.planner-ui .roof-tools-row { gap: 7px; }
  html body.planner-ui .roof-tools-row .reset-roof { margin-left: 0 !important; }
  html body.planner-ui .roof-tools-row .roof-alignment-controls { flex: 1 1 100%; margin-left: 0; padding: 8px 0 0; border-left: 0; border-top: 1px solid #e2e6e9; }
  html body.planner-ui .roof-tools-row .roof-alignment-controls label:first-child { flex: 1; }
  html body.planner-ui .roof-tools-row .roof-alignment-controls select { width: 100%; }
}
@media (max-width: 930px) {
  html body.planner-ui .roof-editor-redesign { display: flex !important; flex-direction: column; }
  html body.planner-ui .roof-editor-redesign > .editor-tool-sidebar { order: 1; }
  html body.planner-ui .roof-editor-redesign > .canvas-card { order: 2; }
  html body.planner-ui .roof-editor-redesign > .editor-properties { order: 3; max-height: none; }
  html body.planner-ui .roof-selection-row { flex-wrap: wrap; }
}
@media (max-width: 700px) {
  html body.planner-ui .roof-tools-row .workbar-divider { display: none; }
  html body.planner-ui .roof-tools-row .tool { flex: 1 1 145px; justify-content: center; }
  html body.planner-ui .roof-tools-row .orthogonal-toggle { flex: 1 1 210px; }
  html body.planner-ui .roof-foundation-panel,
  html body.planner-ui .roof-view-panel { padding: 16px; }
  html body.planner-ui .solar-status-row { grid-template-columns: auto 1fr; }
  html body.planner-ui .solar-status-row #load-solar-imagery { grid-column: 1 / -1; justify-self: start; }
  html body.planner-ui .roof-foundation-actions { grid-template-columns: 1fr; }
  html body.planner-ui .roof-view-controls .control-divider { display: none; }
  html body.planner-ui .roof-view-controls .visibility-toggle { margin-left: 0 !important; }
}