/* The map owns its rectangle. Persistent controls live in their own grid row. */
.app-shell { grid-template-columns: minmax(0, 1fr); }
.workspace-view { min-width: 0; }
.app-shell[data-mode="guided"] .plan-view {
  grid-template-columns: minmax(0, 1fr) 330px;
  grid-template-rows: auto minmax(0, 1fr);
  grid-template-areas: "chrome chrome" "plan inspector";
  overflow: hidden;
}
.app-shell[data-mode="advanced"] .plan-view {
  grid-template-columns: 58px minmax(0, 1fr) 328px;
  grid-template-rows: auto minmax(0, 1fr);
  grid-template-areas: "chrome chrome chrome" "tools plan inspector";
  overflow: hidden;
}
.plan-chrome { grid-area: chrome; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; padding: 7px 12px; min-width: 0; background: var(--paper); border-bottom: 1px solid var(--line-strong); }
.plan-chrome .canvas-toolbar { position: static; flex: 1 1 510px; min-width: 0; flex-wrap: wrap; padding: 0; border: 0; border-radius: 0; box-shadow: none; background: transparent; }
.plan-chrome .canvas-toolbar .seg-button { font-size: 12px; min-height: 34px; }
.plan-chrome .canvas-toolbar .icon-button { min-height: 34px; }
.plan-chrome #expandPlanButton { color: var(--teal-dark); font-weight: 650; }
.plan-chrome .heat-legend { position: static; display: flex; flex: 0 1 auto; flex-wrap: wrap; align-items: center; gap: 8px 12px; width: auto; min-width: 0; margin-left: auto; padding: 0; border: 0; border-radius: 0; box-shadow: none; background: transparent; }
.plan-chrome .heat-legend > header { display: grid; gap: 3px; margin: 0; font-size: 12px; }
.plan-chrome .coverage-bands { gap: 12px; }
.plan-chrome .coverage-band { grid-template-columns: 10px auto; gap: 2px 5px; align-items: center; }
.plan-chrome .coverage-band i { width: 10px; height: 10px; }
.plan-chrome .coverage-band strong { font-size: 12px; }
.plan-chrome .coverage-band span { grid-column: 2; font-size: 11px; }
.plan-chrome .coverage-display-options { border: 0; margin: 0; padding: 0; }
.plan-chrome .coverage-display-options summary { font-size: 12px; padding: 8px 0; }
.plan-chrome .coverage-display-options[open] { flex: 1 0 100%; }
.plan-chrome .coverage-display-options[open] label { margin-top: 0; max-width: 280px; }
.plan-chrome .coverage-display-options[open] input { max-width: 280px; }
.plan-chrome #coverageEmpty { margin: 0; }
.plan-chrome [hidden] { display: none; }
.app-shell[data-mode] .plan-view > .tool-rail { grid-area: tools; }
.app-shell[data-mode] .plan-view > .plan-main { grid-area: plan; display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.app-shell[data-mode] .plan-view > .inspector { grid-area: inspector; position: static; width: auto; min-height: 0; box-shadow: none; }
.app-shell[data-mode] .plan-main > .metrics-band { flex: 0 0 54px; padding-right: 0; }
.app-shell[data-mode] .plan-main > .drawing-guide { flex: 0 0 auto; padding: 9px 14px; }
.app-shell[data-mode] .plan-main > .canvas-stage { flex: 1 1 0; min-height: 0; }
.plan-main > .canvas-status { position: static; flex: 0 0 26px; height: 26px; min-width: 0; line-height: 26px; }
.plan-main > .scale-guide { position: static; flex: 0 0 auto; width: auto; transform: none; border-radius: 0; box-shadow: none; border-width: 0 0 1px; }
.app-shell[data-mode="guided"] .plan-view:is(.is-expanded, .is-drawing) { grid-template-columns: minmax(0, 1fr); grid-template-areas: "chrome" "plan"; }
.app-shell[data-mode="advanced"] .plan-view:is(.is-expanded, .is-drawing) { grid-template-columns: 58px minmax(0, 1fr); grid-template-areas: "chrome chrome" "tools plan"; }
.app-shell[data-mode] .plan-view:is(.is-expanded, .is-drawing) > .inspector { display: none; }
.app-shell[data-mode] .plan-view.is-drawing .metrics-band, .plan-view.is-drawing #probeCard { display: none; }
.plan-view.is-drawing #expandPlanButton { display: none; }
@media (min-width: 1251px) and (max-width: 1400px) {
  .app-shell[data-mode="advanced"] .topbar { grid-template-columns: 172px minmax(110px, 1fr) auto minmax(320px, auto); }
  .app-shell[data-mode="advanced"] .view-tab { padding: 0 10px; font-size: 14px; }
}
@media (max-width: 1100px) {
  .app-shell[data-mode="advanced"] .plan-view { grid-template-columns: 54px minmax(0, 1fr) 292px; }
  .app-shell[data-mode="guided"] .plan-view { grid-template-columns: minmax(0, 1fr) 300px; }
  .app-shell[data-mode="guided"] .plan-view:is(.is-expanded, .is-drawing) { grid-template-columns: minmax(0, 1fr); }
  .app-shell[data-mode="advanced"] .plan-view:is(.is-expanded, .is-drawing) { grid-template-columns: 54px minmax(0, 1fr); }
  .plan-chrome { column-gap: 12px; }
}
@media (max-width: 720px) {
  .app-shell[data-mode="advanced"] .topbar { grid-template-columns: 154px minmax(0, 1fr); }
  .app-shell[data-mode="advanced"] .topbar-actions { grid-column: 2; gap: 4px; padding-right: 8px; }
  .app-shell[data-mode="advanced"] .topbar-actions .button { padding-right: 7px; padding-left: 7px; }
  .app-shell[data-mode="advanced"] .brand-button { gap: 6px; padding: 0 8px; }
  .app-shell[data-mode="advanced"] .brand-button strong { font-size: 12px; }
  .app-shell[data-mode="advanced"] .view-tabs { justify-content: flex-start; min-width: 0; overflow-x: auto; }
  .app-shell[data-mode="advanced"] .view-tabs > .control-help-wrap { flex: 0 0 auto; }
  .app-shell[data-mode="advanced"] .view-tab { flex-shrink: 0; white-space: nowrap; }
  .plan-chrome { padding: 7px 8px; }
  .plan-chrome .canvas-toolbar { flex-basis: 100%; }
  .plan-chrome .heat-legend { margin-left: 0; gap: 8px; }
  .plan-chrome .coverage-bands { gap: 10px; }
  .app-shell[data-mode="guided"] .plan-view { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(400px, 58dvh) auto; grid-template-areas: "chrome" "plan" "inspector"; overflow: auto; }
  .app-shell[data-mode="advanced"] .plan-view { grid-template-columns: 54px minmax(0, 1fr); grid-template-rows: auto minmax(400px, 58dvh) auto; grid-template-areas: "chrome chrome" "tools plan" "inspector inspector"; overflow: auto; }
  /* A stacked inspector grows with its contents; its footer never overlays Apply. */
  .app-shell[data-mode] .plan-view > .inspector { display: block; min-height: 400px; }
  .app-shell[data-mode] .plan-view:is(.is-expanded, .is-drawing) { grid-template-rows: auto minmax(0, 1fr); overflow: hidden; }
  .canvas-status #modelStatus { display: none; }
  .canvas-status { grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
  .drawing-instructions { flex-basis: 100%; }
  .drawing-instructions strong { font-size: 14px; }
  .drawing-instructions span { font-size: 12px; }
}