:root {
  --shell-ink: #07111f;
  --shell-ink-soft: #142235;
  --shell-teal: #0f8c96;
  --shell-teal-soft: #e9f7f7;
  --shell-orange: #e6522c;
  --shell-orange-action: #c74424;
}

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

body.auth-checking,
body.auth-required {
  background: var(--shell-ink);
}

.auth-gate {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  place-items: stretch;
  align-items: center;
  padding: clamp(1.25rem, 4vw, 4rem);
  background:
    radial-gradient(circle at 68% 35%, rgba(34, 135, 146, 0.22), transparent 33rem),
    linear-gradient(135deg, #07111f 0%, #0b1827 72%, #10293a 100%);
}

.auth-hero-image {
  position: absolute;
  z-index: -2;
  right: clamp(1.25rem, 4vw, 4rem);
  top: 50%;
  width: min(64vw, 68rem);
  max-height: calc(100vh - 6rem);
  transform: translateY(-50%);
  object-fit: contain;
  border-radius: 1.25rem;
  box-shadow: 0 2rem 5rem rgba(0, 0, 0, 0.35);
}

.auth-hero-shade {
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(90deg, rgba(7, 17, 31, 0.98) 0%, rgba(7, 17, 31, 0.94) 31%, rgba(7, 17, 31, 0.16) 62%, rgba(7, 17, 31, 0.04) 100%);
}

.auth-card {
  align-self: center;
  width: min(100%, 31rem);
  padding: clamp(1.35rem, 3vw, 2.4rem);
  color: #f8fafc;
  text-align: center;
  background: rgba(10, 24, 39, 0.88);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 1.25rem;
  box-shadow: 0 1.75rem 5rem rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(16px);
}

.auth-eyebrow,
.journey-kicker {
  color: var(--shell-teal);
  font-size: 0.74rem;
  font-weight: 750;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.auth-card h1 {
  margin-top: 0.35rem;
  font-size: clamp(2.7rem, 7vw, 5.4rem);
  font-weight: 720;
  line-height: 0.95;
  letter-spacing: -0.055em;
}

.auth-product-name {
  margin: 0.8rem 0 1.8rem !important;
  color: #e8f2f5 !important;
  font-size: clamp(1.05rem, 2vw, 1.45rem);
  font-weight: 560;
}

.auth-product-name span { color: var(--shell-orange); }
.auth-card #authMessage { color: #b8c7d4; }
.auth-card #authMessage:empty { display: none; }

.auth-access {
  width: 100%;
  margin-top: 0.7rem;
  padding: 0.75rem 1rem;
  border-color: var(--shell-orange-action) !important;
  background: var(--shell-orange-action) !important;
  color: #fff !important;
  font-weight: 700;
  text-decoration: none;
}

.auth-access:hover,
.auth-access:focus-visible {
  border-color: #a9361d !important;
  background: #a9361d !important;
}

body:not([data-app-screen]) .app-wrap,
body[data-app-screen="loading"] .app-wrap {
  visibility: hidden;
}

.dashboard-screen,
.create-screen,
.editor-screen { display: none; }

body[data-app-screen="dashboard"] .dashboard-screen,
body[data-app-screen="create"] .create-screen,
body[data-app-screen="editor"] .editor-screen { display: block; }

body[data-app-screen="dashboard"] .editor-toolbar-item,
body[data-app-screen="create"] .editor-toolbar-item { display: none; }
body[data-app-screen="create"] .calculation-toolbar-item,
body[data-app-screen="create"] .calculation-lifecycle-wrap,
body[data-app-screen="editor"] .calculation-toolbar-item { display: none; }
.calculation-lifecycle-status[data-state="paused"] { color: #7a4a00; }
.calculation-lifecycle-status[data-state="pending"] { color: #9a3412; font-weight: 700; }
.calculation-lifecycle-status[data-state="stale"] { color: #9a3412; }
.calculation-lifecycle-status[data-state="current"] { color: #166534; }

.room-snap-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 36px;
  padding: 0.35rem 0.55rem;
  color: #334155;
  font-size: 0.75rem;
  white-space: nowrap;
}
.room-snap-toggle input { margin: 0; }
.room-snap-toggle strong { color: var(--shell-teal); }

body[data-app-screen="dashboard"] #homeDashboardBtn,
body[data-app-screen="create"] #homeDashboardBtn { display: none; }

.app-wrap {
  width: min(100%, 96rem);
  margin: 0 auto;
  grid-template-columns: minmax(19rem, 24rem) minmax(0, 1fr);
  gap: clamp(0.75rem, 1.5vw, 1.25rem);
}

body[data-app-screen="dashboard"] .app-wrap { grid-template-columns: minmax(0, 1fr); }

.heatflow-scenario-panel {
  margin: 0.7rem 0;
  border: 1px solid #b9d9d5;
  border-radius: 0.8rem;
  background: #f4fbfa;
  overflow: clip;
}
.heatflow-scenario-panel > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 44px;
  padding: 0.65rem 0.8rem;
  cursor: pointer;
  border-radius: 0.72rem;
  background: var(--shell-orange-action);
  color: #fff;
  font-weight: 800;
  list-style: none;
}
.heatflow-scenario-panel[open] > summary { border-radius: 0.72rem 0.72rem 0 0; }
.heatflow-scenario-panel > summary::-webkit-details-marker { display: none; }
.heatflow-scenario-panel > summary > span:first-child {
  display: flex;
  align-items: baseline;
  gap: 0.55rem;
}
.heatflow-scenario-panel > summary small { color: #fff8f0; }
.heatflow-scenario-summary { color: #fff; font-size: 0.78rem; font-weight: 800; }
.heatflow-scenario-body { padding: 0.8rem; }
.heatflow-scenario-fields {
  display: grid;
  grid-template-columns: repeat(3, minmax(9rem, 1fr));
  gap: 0.65rem;
}
.heatflow-scenario-fields > label { display: grid; gap: 0.25rem; font-size: 0.78rem; font-weight: 700; }
.heatflow-scenario-fields input,
.heatflow-scenario-fields select { width: 100%; min-width: 0; }
.temperature-input,
.duration-input { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0.35rem; }
.temperature-input b,
.duration-input b { color: #526c70; font-size: 0.75rem; }
.heatflow-scenario-actions { display: flex; gap: 0.45rem; margin-top: 0.7rem; }
.heatflow-timeline { display: block; margin-top: 0.7rem; }
.heatflow-timeline input { width: 100%; accent-color: var(--shell-orange-action); }
.heatflow-playback-status { display: flex; justify-content: space-between; gap: 0.7rem; color: #526c70; font-size: 0.78rem; }
.heatflow-playback-status strong { color: #173f43; }
.scenario-cost-report {
  margin-top: 0.7rem;
  border-top: 1px solid #cfe3e0;
  padding-top: 0.55rem;
}
.scenario-cost-report > summary {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  cursor: pointer;
  color: #173f43;
  font-weight: 800;
}
.scenario-cost-report > summary strong { color: #176b43; }
.scenario-cost-body { display: grid; gap: 0.55rem; padding-top: 0.65rem; }
.scenario-cost-rates {
  display: grid;
  grid-template-columns: repeat(4, minmax(8rem, 1fr));
  gap: 0.55rem;
}
.scenario-cost-rates label { display: grid; gap: 0.2rem; font-size: 0.75rem; font-weight: 700; }
.scenario-cost-rates input { width: 100%; min-width: 0; }
.scenario-cost-body p,
.scenario-cost-body small { margin: 0; }
.scenario-cost-body small { color: #526c70; }
.heatflow-scenario-panel[data-state="playing"] { border-color: var(--shell-orange-action); }
.heatflow-scenario-panel[data-state="complete"] { border-color: #38a169; background: #f2fbf5; }

.journey-panel {
  align-self: stretch;
  padding: clamp(1.2rem, 2.5vw, 2rem);
}

.journey-panel h1 {
  margin-top: 0.35rem;
  font-size: clamp(1.8rem, 3vw, 2.7rem);
  letter-spacing: -0.035em;
}
.journey-panel h1[tabindex="-1"]:focus { outline: none; }

.journey-title-row {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin-bottom: 1rem;
}
.journey-title-row h1 { margin: 0; }

.context-help {
  position: relative;
  flex: 0 0 auto;
}
.context-help > summary {
  display: grid;
  width: 2.75rem;
  height: 2.75rem;
  place-items: center;
  color: #27555b;
  background: var(--shell-teal-soft);
  border: 1px solid #b9dddd;
  border-radius: 50%;
  cursor: pointer;
  font-weight: 800;
  list-style: none;
}
.context-help > summary::-webkit-details-marker { display: none; }
.context-help > summary:focus-visible {
  outline: 3px solid rgba(15, 140, 150, 0.3);
  outline-offset: 2px;
}
.context-help > p {
  position: absolute;
  z-index: 100;
  top: calc(100% + 0.45rem);
  left: 0;
  width: min(18rem, calc(100vw - 2rem));
  margin: 0;
  padding: 0.7rem 0.75rem;
  color: var(--text-main);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 0.7rem;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.16);
  font-size: 0.78rem;
  line-height: 1.45;
}

.text-button { border: 0; padding: 0; margin-bottom: 1.3rem; color: #3b5268; background: transparent; font-size: 0.82rem; }
.text-button:hover { color: var(--shell-orange); }

.home-title-control {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  min-width: 0;
}
.home-title-control select {
  width: min(28rem, 58vw);
  min-height: 46px;
  padding: 0.45rem 2.2rem 0.45rem 0.75rem;
  color: var(--text-main);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 0.7rem;
  font: inherit;
  font-size: clamp(1.15rem, 2.2vw, 1.65rem);
  font-weight: 720;
  letter-spacing: -0.025em;
  text-overflow: ellipsis;
}
.home-title-control .danger { min-height: 44px; }

#authControls { min-width: 0; }
.account-menu { position: relative; }
.account-menu > summary {
  display: flex;
  min-width: 7rem;
  max-width: min(15rem, 40vw);
  min-height: 44px;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  list-style: none;
}
.account-menu > summary::-webkit-details-marker { display: none; }
.account-menu > summary::after { content: "▾"; flex: 0 0 auto; color: #64748b; }
.account-menu > summary span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-menu-actions {
  position: absolute;
  z-index: 120;
  top: calc(100% + 0.4rem);
  right: 0;
  display: grid;
  width: min(15rem, calc(100vw - 1rem));
  gap: 0.35rem;
  padding: 0.5rem;
  background: #fff;
  border: 1px solid #d5dce3;
  border-radius: 0.75rem;
  box-shadow: 0 0.75rem 2rem rgba(7, 17, 31, 0.18);
}
.account-menu-actions .btn { min-height: 44px; text-align: left; text-decoration: none; }
.account-tier-label { padding: 0.3rem 0.55rem; color: #526579; font-size: 0.78rem; font-weight: 700; }

.sharing-dialog {
  width: min(34rem, calc(100% - 1rem));
  max-height: calc(100dvh - 1rem);
  padding: 0;
  border: 0;
  border-radius: 1rem;
  box-shadow: 0 1.5rem 4rem rgba(7, 17, 31, 0.35);
}
.sharing-dialog::backdrop { background: rgba(7, 17, 31, 0.68); }
.sharing-dialog form { display: grid; gap: 0.85rem; padding: clamp(1rem, 4vw, 1.5rem); }
.sharing-dialog p { margin: 0; color: #425466; line-height: 1.45; }
.sharing-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.sharing-heading h2 { margin: 0.15rem 0 0; font-size: 1.35rem; }
.sharing-close { border: 0; background: transparent; font-size: 1.7rem; line-height: 1; cursor: pointer; }
.sharing-dialog label { display: grid; gap: 0.3rem; font-size: 0.85rem; font-weight: 650; }
.sharing-dialog input:not([type="checkbox"]), .sharing-dialog select {
  width: 100%; min-height: 44px; padding: 0.55rem 0.65rem; border: 1px solid #aab8c6; border-radius: 0.55rem;
}
.sharing-scopes { display: grid; gap: 0.55rem; margin: 0; padding: 0.8rem; border: 1px solid #d5dee7; border-radius: 0.7rem; }
.sharing-scopes label, .sharing-dialog .consent-check, .managed-customer-option { display: flex; align-items: flex-start; gap: 0.55rem; }
.sharing-scopes input, .sharing-dialog .consent-check input, .managed-customer-option input { margin-top: 0.15rem; }
.sharing-result { display: flex; flex-wrap: wrap; gap: 0.55rem; padding: 0.8rem; border-radius: 0.7rem; background: #eef8f3; }
.sharing-result p { flex-basis: 100%; }
.sharing-management { display: grid; gap: 0.55rem; padding-top: 0.15rem; }
.sharing-management h3 { margin: 0; font-size: 1rem; }
.sharing-access-list { display: grid; gap: 0.45rem; }
.sharing-access-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0.65rem; padding: 0.65rem 0.7rem; border: 1px solid #d5dee7; border-radius: 0.7rem; background: #f8fafc; }
.sharing-access-person { min-width: 0; }
.sharing-access-person strong, .sharing-access-person span { display: block; overflow-wrap: anywhere; }
.sharing-access-person span { margin-top: 0.12rem; color: #5c6b78; font-size: 0.78rem; }
.sharing-access-empty { padding: 0.65rem 0; color: #5c6b78; font-size: 0.84rem; }
.sharing-actions { display: flex; justify-content: flex-end; gap: 0.55rem; }
.sharing-scope-summary { display: grid; gap: 0.35rem; padding: 0.7rem; border-radius: 0.7rem; background: #f3f7fa; }
.sharing-recipient-identity { display: grid; grid-template-columns: minmax(7.5rem, auto) 1fr; gap: 0.25rem 0.7rem; padding: 0.75rem; border: 1px solid #d5dee7; border-radius: 0.7rem; background: #f8fafc; font-size: 0.85rem; }
.sharing-recipient-identity span { color: #5c6b78; }
.sharing-recipient-identity strong { overflow-wrap: anywhere; }
@media (max-width: 560px) {
  .sharing-dialog { width: calc(100% - 0.5rem); max-height: calc(100dvh - 0.5rem); }
  .sharing-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .sharing-access-item { grid-template-columns: minmax(0, 1fr); }
  .sharing-access-item button { justify-self: start; }
}

.home-assistant-onboarding-dialog {
  width: min(calc(100% - 2rem), 36rem);
  max-height: calc(100dvh - 2rem);
  margin: auto;
  padding: 0;
  color: var(--text-main);
  background: #fff;
  border: 1px solid #d5dce3;
  border-radius: 1rem;
  box-shadow: 0 1.5rem 4rem rgba(7, 17, 31, 0.28);
  overflow: auto;
}
.home-assistant-onboarding-dialog::backdrop { background: rgba(7, 17, 31, 0.68); }
.home-assistant-onboarding-content { display: grid; gap: 0.85rem; padding: clamp(1rem, 4vw, 1.5rem); }
.home-assistant-onboarding-content h2 { margin: 0; font-size: 1.4rem; }
.home-assistant-onboarding-content p { margin: 0; color: #425466; font-size: 0.9rem; line-height: 1.5; }
.home-assistant-connection-decision {
  display: grid;
  gap: 0.55rem;
  margin: 0;
  padding: 0;
  border: 0;
}
.home-assistant-connection-decision legend { margin-bottom: 0.7rem; font-weight: 750; line-height: 1.35; }
.home-assistant-connection-decision label {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  min-height: 46px;
  padding: 0.55rem 0.7rem;
  border: 1px solid #cbd5e1;
  border-radius: 0.7rem;
  cursor: pointer;
}
.home-assistant-connection-decision input { width: 1.15rem; height: 1.15rem; accent-color: var(--shell-teal); }
#homeAssistantConnectionDetails { display: grid; gap: 0.85rem; }
#homeAssistantConnectionDetails[hidden] { display: none !important; }
.home-assistant-origin-field { display: grid; gap: 0.35rem; min-width: 0; }
.home-assistant-origin-field label { color: #16202d; font-size: 0.82rem; font-weight: 750; }
.home-assistant-origin-field input {
  width: 100%;
  min-width: 0;
  min-height: 46px;
  padding: 0.55rem 0.65rem;
  color: #111827;
  background: #fff;
  border: 1px solid #8794a5;
  border-radius: 0.55rem;
  font-size: 1rem;
}
.home-assistant-origin-field input:focus-visible {
  outline: 3px solid rgba(37, 99, 235, 0.35);
  outline-offset: 2px;
}
.home-assistant-origin-field .small { color: #64748b; }
.home-assistant-onboarding-note {
  display: grid;
  gap: 0.3rem;
  padding: 0.8rem;
  border: 1px solid #b6dcdf;
  border-radius: 0.75rem;
  background: var(--shell-teal-soft);
  color: #244b50;
  font-size: 0.82rem;
  line-height: 1.45;
}
.home-assistant-onboarding-note > summary { cursor: pointer; font-weight: 750; }
.home-assistant-onboarding-note > p { margin-top: 0.45rem; color: #244b50; }
.home-assistant-onboarding-actions { display: flex; justify-content: flex-end; gap: 0.55rem; }
.home-assistant-onboarding-actions .btn { min-height: 44px; }

.account-deletion-dialog {
  width: min(calc(100% - 2rem), 32rem);
  max-height: calc(100dvh - 2rem);
  margin: auto;
  padding: 0;
  color: var(--text-main);
  background: #fff;
  border: 1px solid #d5dce3;
  border-radius: 1rem;
  box-shadow: 0 1.5rem 4rem rgba(7, 17, 31, 0.28);
  overflow: auto;
}
.account-deletion-dialog::backdrop { background: rgba(7, 17, 31, 0.68); }
.account-deletion-dialog form { display: grid; gap: 0.85rem; padding: clamp(1rem, 4vw, 1.5rem); }
.account-deletion-dialog p { margin: 0; color: #425466; font-size: 0.9rem; line-height: 1.5; }
.account-deletion-dialog .account-deletion-note { color: #64748b; font-size: 0.8rem; }
.account-deletion-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.account-deletion-heading h2 { margin-top: 0.2rem; font-size: 1.35rem; }
.account-deletion-close {
  display: grid;
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  place-items: center;
  padding: 0;
  color: #475569;
  background: #f1f5f9;
  border: 0;
  border-radius: 50%;
  font-size: 1.5rem;
}
.account-deletion-dialog label { font-size: 0.85rem; font-weight: 650; }
.account-deletion-dialog input {
  width: 100%;
  min-height: 46px;
  padding: 0.55rem 0.65rem;
  border: 1px solid #94a3b8;
  border-radius: 0.55rem;
  font-size: 1rem;
}
.account-deletion-status { min-height: 1.35rem; }
.account-deletion-status[data-state="error"] { color: #a32626; font-weight: 650; }
.account-deletion-actions { display: flex; justify-content: flex-end; gap: 0.55rem; }
.account-deletion-actions .btn { min-height: 44px; }

@media (max-width: 520px) {
  .home-assistant-onboarding-dialog { width: calc(100% - 1rem); max-height: calc(100dvh - 1rem); }
  .home-assistant-onboarding-actions { display: grid; grid-template-columns: 1fr; }
  .home-assistant-onboarding-actions .btn { width: 100%; }
  .account-deletion-dialog { width: calc(100% - 1rem); max-height: calc(100dvh - 1rem); }
  .account-deletion-actions { display: grid; grid-template-columns: 1fr; }
  .account-deletion-actions .btn.danger { grid-row: 1; }
  body[data-app-screen="dashboard"] .calculation-lifecycle-wrap,
  body[data-app-screen="create"] .calculation-lifecycle-wrap { display: none; }
  .account-menu > summary { max-width: 11rem; }
}

.starter-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.7rem;
  padding: 0.9rem;
  background: #f6f8fa;
  border: 1px solid #e4e8ec;
  border-radius: 0.85rem;
}

.starter-fields label:last-child { grid-column: 1 / -1; }
.starter-fields label,
.template-create-fields label { display: grid; gap: 0.3rem; color: var(--text-muted); font-size: 0.74rem; font-weight: 650; }
.starter-fields select,
.starter-fields input,
.template-create-fields select,
.template-create-fields input { width: 100%; min-height: 44px; padding: 0.5rem 0.6rem; border: 1px solid var(--border); border-radius: 0.55rem; background: #fff; }
.template-create-fields #starterCentralHeatingFields { display: grid; gap: 0.3rem; }

.template-create-fields { display: grid; gap: 0.55rem; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--border); }
.template-status-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.45rem; }

.save-template-form {
  display: grid;
  gap: 0.5rem;
  margin: 0 0 0.75rem;
  padding: 0.75rem;
  background: #f6f8fa;
  border: 1px solid #e4e8ec;
  border-radius: 0.75rem;
}
.save-template-form[hidden] { display: none; }
.save-template-form label { color: var(--text-muted); font-size: 0.74rem; font-weight: 650; }
.save-template-form input { width: 100%; min-height: 44px; }
.save-template-actions { display: flex; flex-wrap: wrap; gap: 0.45rem; }

@media (max-width: 480px) {
  /* The model header already announces the active editing mode and any
     actionable operation state. Avoid spending a separate phone row on the
     global calculation-paused message while edits intentionally freeze it. */
  body[data-app-screen="editor"] .calculation-lifecycle-wrap { display: none; }
  .save-template-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .home-title-control {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    width: 100%;
  }
  .home-title-control select { width: 100%; }
  .context-help > p { left: auto; right: 0; }
  /* The rename popover belongs to the complete active-home row, not the
     narrow Rename summary at its right edge. Anchor it from the row's content
     start so the full form remains inside a 320 px viewport. */
  .top-right .active-home-status .home-name-form {
    left: 0;
    right: auto;
  }
}

.model-panel { position: relative; min-width: 0; }
body[data-app-screen="editor"] #modelViewport { scroll-margin-top: 4.5rem; }
body[data-app-screen="dashboard"] .model-panel {
  display: flex;
  flex-direction: column;
}
body[data-app-screen="dashboard"] .display-toolbar { order: 0; }
body[data-app-screen="dashboard"] #modelViewport { order: 1; }
body[data-app-screen="dashboard"] .model-context-header { order: 2; margin: 0.8rem 0 0; }
body[data-app-screen="dashboard"] #dashboardOperationStatus { order: 3; }
body[data-app-screen="dashboard"] #airProfileRoomDetail { order: 4; }
body[data-app-screen="dashboard"] #airQualityPanel { order: 5; }
.model-context-header { align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 0.85rem; }
body[data-app-screen="dashboard"] .model-context-header.dashboard-screen { display: flex; }
body[data-app-screen="create"] .model-context-header.create-screen { display: flex; }
body[data-app-screen="create"] #templatePreviewKicker { display: none; }
body[data-app-screen="create"]:not([data-template-preview="ready"]) .model-context-header.create-screen {
  display: none;
}
body:not([data-app-screen="editor"]) #cameraControls { display: none !important; }
.model-context-header h2 { margin-top: 0.2rem; font-size: clamp(1.25rem, 2.2vw, 1.8rem); }
.model-context-header p { margin: 0.25rem 0 0; color: var(--text-muted); }
.dashboard-home-identity,
.dashboard-home-actions { display: flex; align-items: center; gap: 0.55rem; min-width: 0; }
.dashboard-home-identity { justify-content: space-between; width: 100%; }
.dashboard-home-actions { flex: 1 1 auto; }
.dashboard-home-actions .home-title-control { flex: 1 1 16rem; min-width: 10rem; }
.default-home-choice { display: inline-flex; align-items: center; gap: 0.35rem; white-space: nowrap; font-size: 0.75rem; color: var(--text-muted); }
.default-home-choice input { margin: 0; }
.house-air-status {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 2rem;
  padding: 0.35rem 0.6rem;
  border-radius: 999px;
  color: #385064;
  background: #eef3f6;
  font-size: 0.74rem;
  font-weight: 750;
  white-space: nowrap;
}
.house-air-status-icon {
  display: grid;
  width: 1.25rem;
  height: 1.25rem;
  place-items: center;
  border-radius: 50%;
  background: #fff;
}
.house-air-status[data-state="success"] { color: #145c4f; background: #e4f5f0; }
.house-air-status[data-state="warning"] { color: #7c4700; background: #fff2cc; }
.house-air-status[data-state="loading"] .house-air-status-icon {
  animation: air-status-pulse 1.2s ease-in-out infinite;
}
@keyframes air-status-pulse { 50% { opacity: 0.45; } }
.dashboard-air-temperature-legend {
  position: absolute;
  z-index: 12;
  right: 0.65rem;
  bottom: 0.65rem;
  width: min(15rem, calc(100% - 1.3rem));
  padding: 0.45rem 0.55rem;
  border: 1px solid rgba(100, 116, 139, 0.28);
  border-radius: 0.65rem;
  color: #334155;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 0.2rem 0.7rem rgba(15, 23, 42, 0.12);
  font-size: 0.66rem;
  pointer-events: none;
}
body[data-app-screen="dashboard"] .dashboard-air-temperature-legend.dashboard-screen {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.18rem 0.55rem;
}
.dashboard-air-temperature-scale {
  height: 0.42rem;
  border-radius: 999px;
  background: linear-gradient(90deg, #1e40af, #22c55e, #f97316);
}
.dashboard-air-temperature-values {
  display: flex;
  grid-column: 1;
  justify-content: space-between;
  font-variant-numeric: tabular-nums;
}
.dashboard-air-temperature-values b { font: inherit; font-weight: 700; }
.dashboard-air-temperature-missing {
  display: inline-flex;
  grid-column: 2;
  grid-row: 1 / span 2;
  align-items: center;
  gap: 0.28rem;
  white-space: nowrap;
}
.dashboard-air-temperature-missing i {
  width: 0.7rem;
  height: 0.7rem;
  border: 1px solid #cbd5e1;
  border-radius: 0.18rem;
  background: #e5e7eb;
}
.air-profile-room-detail {
  margin-top: 0.75rem;
  padding: 0.85rem;
  border: 1px solid var(--border);
  border-radius: 0.8rem;
  background: #f8fafb;
}
body[data-app-screen="dashboard"][data-display-mode="model"] .air-profile-room-detail.dashboard-screen:not([hidden]) {
  display: block;
  position: relative;
  z-index: 31;
}
.air-profile-room-heading {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 0.75rem;
}
.air-profile-room-heading h3 { margin: 0.1rem 0 0; }
.active-home-status { position: relative; }
.home-name-editor > summary {
  display: inline-flex;
  min-height: 2.75rem;
  align-items: center;
  justify-content: center;
  list-style: none;
  cursor: pointer;
}
.home-name-editor > summary::-webkit-details-marker { display: none; }
.home-name-form {
  position: absolute;
  top: calc(100% + 0.45rem);
  right: 0;
  z-index: 130;
  display: grid;
  width: min(22rem, calc(100vw - 1.5rem));
  gap: 0.45rem;
  padding: 0.75rem;
  border: 1px solid #cbd5e1;
  border-radius: 0.7rem;
  background: #fff;
  box-shadow: 0 12px 28px #0f172a24;
}
.home-name-form label { color: #34495e; font-size: 0.75rem; font-weight: 750; }
.home-name-form input { width: 100%; }
.home-name-actions { display: flex; justify-content: flex-end; gap: 0.4rem; }
.display-toolbar {
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem;
  margin: -0.2rem 0 0.75rem;
}
body[data-app-screen="dashboard"] .display-toolbar.dashboard-screen { display: flex; }
.display-tabs { display: flex; gap: 0.35rem; }
.display-options { display: flex; gap: 0.35rem; }
.display-view-toggle {
  width: 2.75rem;
  min-width: 2.75rem;
  min-height: 2.75rem;
  padding: 0;
  border-radius: 50%;
  font-size: 1.2rem;
}
.display-view-toggle::before { content: "▦"; line-height: 1; }
.display-view-toggle[data-next-view="model"]::before { content: "⌂"; }
body[data-app-screen="dashboard"][data-display-mode="model"] .display-toolbar {
  position: absolute;
  z-index: 30;
  top: 0.9rem;
  right: 0.9rem;
  margin: 0;
  padding: 0.28rem;
  border: 1px solid rgba(148, 163, 184, 0.35);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 0.25rem 0.8rem rgba(15, 23, 42, 0.14);
  backdrop-filter: blur(8px);
}
body[data-app-screen="dashboard"][data-display-mode="model"] .display-toolbar .btn,
body[data-app-screen="dashboard"][data-display-mode="model"] .floor-selector-control {
  min-height: 2.75rem;
  padding-inline: 0.7rem;
}
body[data-app-screen="dashboard"][data-display-mode="model"] #heatflowScenarioPanel {
  position: absolute;
  z-index: 29;
  top: 0.9rem;
  left: 0.9rem;
  width: min(34rem, calc(100% - 1.8rem));
  margin: 0;
  box-shadow: 0 0.25rem 0.8rem rgba(15, 23, 42, 0.14);
}
body[data-app-screen="dashboard"][data-display-mode="model"] #heatflowScenarioPanel:not([open]) {
  width: auto;
}
body[data-app-screen="dashboard"][data-display-mode="model"] #heatflowScenarioPanel:not([open]) > summary {
  min-height: 2.75rem;
  padding: 0.45rem 0.7rem;
  border-radius: 999px;
}
body[data-app-screen="dashboard"][data-display-mode="model"] #heatflowScenarioPanel:not([open]) > summary small,
body[data-app-screen="dashboard"][data-display-mode="model"] #heatflowScenarioPanel:not([open]) .heatflow-scenario-summary {
  display: none;
}
.display-floor-menu { position: relative; }
.display-floor-menu > summary {
  align-items: center;
  cursor: pointer;
  display: inline-flex;
  gap: 0.35rem;
  list-style: none;
}
.floor-selector-control,
.plan-floor-picker,
.starter-floor-field {
  border: 2px solid #a94700 !important;
  border-radius: 999px !important;
  background: #d85f09 !important;
  color: #fff !important;
  box-shadow: 0 0.18rem 0.45rem rgba(169, 71, 0, 0.24);
}
.floor-selector-control { min-height: 44px; padding-inline: 0.9rem !important; font-weight: 800; }
.plan-floor-picker { padding: 0.25rem 0.45rem; }
.plan-floor-picker > span,
.starter-floor-field > span { color: #fff !important; font-weight: 800; }
.starter-floor-field { padding: 0.55rem 0.7rem; }
.floor-selector-control:focus-visible,
.plan-floor-picker:focus-within,
.starter-floor-field:focus-within { outline: 3px solid rgba(216, 95, 9, 0.32); outline-offset: 2px; }
.display-floor-menu > summary::-webkit-details-marker { display: none; }
.display-floor-menu > summary::after { content: "▾"; font-size: 0.72em; }
.display-floor-options {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.14);
  display: grid;
  gap: 0.35rem;
  min-width: 10rem;
  padding: 0.45rem;
  position: absolute;
  right: 0;
  top: calc(100% + 0.35rem);
  z-index: 90;
}
.display-floor-options .btn { width: 100%; }
body[data-app-screen="dashboard"][data-display-mode="air_quality"] #modelViewport { display: none; }
body[data-app-screen="dashboard"][data-display-mode="air_quality"] .display-options > :not(#openHomeEditorBtn) {
  display: none;
}
.air-quality-panel { padding: 0.2rem 0 0.4rem; }
body[data-app-screen="dashboard"][data-display-mode="air_quality"] .air-quality-panel.dashboard-screen { display: block; }
.air-quality-heading { display: flex; align-items: start; justify-content: space-between; gap: 0.75rem; }
.air-quality-heading h3 { margin: 0; }
.air-quality-heading p { margin: 0.25rem 0 0; color: var(--text-muted); }
.air-quality-actions { display: flex; gap: 0.4rem; }
.monitor-setup { margin: 0.8rem 0; border: 1px solid var(--border); border-radius: 0.8rem; padding: 0.8rem; background: #fafbfc; }
.monitor-setup-heading { display: flex; align-items: start; justify-content: space-between; gap: 0.75rem; }
.monitor-setup-heading h4 { margin: 0.1rem 0 0; }
.monitor-setup-step { margin: 0.75rem 0 0; }
.monitor-setup-step > .home-assistant-origin-field { max-width: 32rem; margin-bottom: 0.65rem; }
.monitor-setup-step fieldset, fieldset.monitor-setup-step { border: 0; margin: 0.75rem 0 0; padding: 0; }
.monitor-setup-step legend { font-weight: 700; margin-bottom: 0.45rem; }
.monitor-choice-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 0.5rem; }
.monitor-choice { display: grid; grid-template-columns: auto 1fr; gap: 0.55rem; align-items: start; min-height: 2.75rem; border: 1px solid var(--border); border-radius: 0.65rem; padding: 0.65rem; background: #fff; cursor: pointer; }
.monitor-choice input { margin-top: 0.2rem; }
.monitor-choice strong, .monitor-choice span { display: block; }
.monitor-choice span { color: var(--text-muted); font-size: 0.72rem; margin-top: 0.15rem; }
.monitor-consent-choice { display: grid; grid-template-columns: auto 1fr; gap: 0.55rem; align-items: start; min-height: 2.75rem; }
.monitor-consent-choice input { margin-top: 0.25rem; }
.monitor-consent-help { margin: 0.35rem 0 0 1.55rem; }
.monitor-consent-help > summary { cursor: pointer; display: inline-block; font-size: 0.75rem; font-weight: 700; }
.monitor-consent-help p { max-width: 52rem; }
.monitor-complete-actions { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-top: 0.6rem; }
.air-quality-status { min-height: 1.2rem; margin: 0.7rem 0; color: var(--text-muted); }
.air-quality-status:not(:empty) { padding: 0.5rem 0.65rem; border-radius: 0.6rem; }
.air-quality-status[data-state="success"] { color: #145c4f; background: #eaf7f5; }
.air-quality-status[data-state="warning"] { color: #7c4700; background: #fff7df; }
.air-quality-status[data-state="error"] { color: #8f1d1d; background: #fff0f0; }
.air-quality-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 0.65rem; }
.air-quality-room { border: 1px solid var(--border); border-radius: 0.8rem; padding: 0.8rem; background: #fafbfc; }
.air-quality-room h4 { margin: 0; }
.air-quality-room-floor { color: var(--text-muted); font-size: 0.7rem; }
.air-quality-values { display: grid; grid-template-columns: repeat(auto-fit, minmax(6.5rem, 1fr)); gap: 0.55rem; margin-top: 0.7rem; }
.air-quality-value { border: 1px solid var(--border); border-radius: 0.65rem; padding: 0.65rem; background: #fff; }
.air-quality-value span { display: block; color: var(--text-muted); font-size: 0.68rem; }
.air-quality-value strong { display: block; margin-top: 0.12rem; font-size: 1.15rem; }
.air-quality-value[data-quality-state="healthy"] { border-color: #74bd98; background: #eaf7f0; }
.air-quality-value[data-quality-state="healthy"] strong,
.air-quality-value[data-quality-state="healthy"] .air-quality-reading-status { color: #145c3f; }
.air-quality-value[data-quality-state="attention"] { border-color: #e2a13a; background: #fff5dc; }
.air-quality-value[data-quality-state="attention"] strong,
.air-quality-value[data-quality-state="attention"] .air-quality-reading-status { color: #7c4700; }
.air-quality-value[data-quality-state="urgent"] { border-color: #db6464; background: #fff0f0; }
.air-quality-value[data-quality-state="urgent"] strong,
.air-quality-value[data-quality-state="urgent"] .air-quality-reading-status { color: #8f1d1d; }
.air-quality-value[data-quality-state="unavailable"],
.air-quality-value[data-quality-state="context"] { border-style: dashed; background: #f4f6f8; }
.air-quality-value .air-quality-reading-status { margin-top: 0.28rem; font-weight: 750; }
.air-quality-source { margin: 0.55rem 0 0; color: var(--text-muted); font-size: 0.67rem; }

body[data-app-screen="dashboard"] #modelViewport,
body[data-app-screen="create"] #modelViewport {
  position: relative;
  border-radius: 0.8rem;
  cursor: pointer;
  outline: none;
}

.template-preview-empty {
  position: absolute;
  z-index: 5;
  inset: 0;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 0.3rem;
  color: #526477;
  text-align: center;
  background: linear-gradient(145deg, #f7f9fb, #edf2f5);
  border: 1px dashed #b8c4cd;
  border-radius: 0.8rem;
}

body[data-app-screen="create"] .template-preview-empty { display: flex; }
body[data-app-screen="create"][data-template-preview="ready"] .template-preview-empty { display: none; }
body[data-app-screen="create"]:not([data-template-preview="ready"]) #house,
body[data-app-screen="create"]:not([data-template-preview="ready"]) #house3d { visibility: hidden; }
.template-preview-empty span { font-size: 0.8rem; }

body[data-app-screen="dashboard"] #modelViewport:focus-visible,
body[data-app-screen="dashboard"] #modelViewport:hover {
  box-shadow: 0 0 0 4px rgba(230, 82, 44, 0.16);
}

.editor-sidebar {
  position: sticky;
  top: 5rem;
  max-height: calc(100vh - 6rem);
  overflow: auto;
}

.editor-help {
  position: relative;
  flex: 0 0 auto;
}
.editor-help > summary {
  display: grid;
  width: 2.75rem;
  height: 2.75rem;
  place-items: center;
  color: #27555b;
  background: var(--shell-teal-soft);
  border: 1px solid #b9dddd;
  border-radius: 50%;
  cursor: pointer;
  font-weight: 800;
  list-style: none;
}
.editor-help > summary::-webkit-details-marker { display: none; }
.editor-help > summary:focus-visible {
  outline: 3px solid rgba(15, 140, 150, 0.3);
  outline-offset: 2px;
}
.editor-help > p {
  position: absolute;
  z-index: 100;
  top: calc(100% + 0.4rem);
  right: 0;
  width: min(19rem, calc(100vw - 2rem));
  margin: 0;
  padding: 0.65rem 0.7rem;
  color: var(--text-main);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 0.65rem;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.16);
  font-size: 0.75rem;
  line-height: 1.4;
}

body[data-app-screen="editor"] .plan-toolkit {
  position: sticky;
  z-index: 75;
  top: 0.4rem;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0.35rem;
  margin: 0.55rem 0;
  padding: 0.4rem;
  border: 1px solid #b8dedc;
  border-radius: 0.8rem;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 0.35rem 1rem rgba(7, 17, 31, 0.12);
  backdrop-filter: blur(12px);
}
body[data-app-screen="editor"] .plan-global-toolkit {
  position: relative;
  grid-template-columns: repeat(6, minmax(0, 1fr));
}
body[data-app-screen="editor"] #planFinishBtn { display: none; }
body[data-app-screen="editor"][data-edit-scope="contents"] [data-architecture-control] {
  display: none !important;
}
body[data-app-screen="editor"][data-edit-scope="structure"] [data-contents-control] {
  display: none !important;
}
/* A selected target keeps one route between Structure and Contents. Hide the
   unrelated global actions while its contextual workbench owns the task. */
body[data-app-screen="editor"][data-target-editor-active="true"]
  .plan-global-toolkit > :not(.plan-edit-scope):not(#planFinishBtn):not(.plan-floor-picker) {
  display: none !important;
}
body[data-app-screen="editor"][data-target-editor-active="true"] .plan-global-toolkit {
  grid-template-columns: minmax(0, 1fr);
}
body[data-app-screen="editor"][data-target-editor-active="true"]
  .plan-global-toolkit > .plan-edit-scope {
  grid-column: 1;
}
/* Once a global task is open, its own heading and Done/Discard action are the
   complete task boundary. Do not repeat the six entry controls inside that
   sheet: closing it restores the normal toolbar and direct plan selection. */
body[data-app-screen="editor"]:is(
  [data-plan-task="select"],
  [data-plan-task="object"],
  [data-plan-task="room"],
  [data-plan-task="view"]
) .plan-global-toolkit > :is(.plan-tool, .plan-edit-scope) {
  display: none !important;
}
.plan-edit-scope {
  display: grid;
  grid-column: span 2;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.2rem;
  min-width: 0;
  padding: 0.15rem;
  border: 1px solid #b8dedc;
  border-radius: 0.65rem;
  background: #edf7f6;
}
.plan-edit-scope .plan-tool {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas:
    "icon label"
    "icon state";
  column-gap: 0.28rem;
  row-gap: 0;
  min-width: 0;
  padding-inline: 0.25rem;
}
.plan-edit-scope .plan-tool > span { grid-area: icon; }
.plan-edit-scope .plan-tool > strong { grid-area: label; }
.plan-edit-scope .plan-scope-state {
  grid-area: state;
  overflow: hidden;
  color: #527278;
  font-size: 0.62rem;
  font-weight: 650;
  line-height: 1.05;
  text-overflow: ellipsis;
}
.plan-edit-scope .plan-tool.active {
  border-color: #13756f;
  color: #fff;
  background: #13756f;
  box-shadow: 0 0.12rem 0.3rem rgba(19, 117, 111, 0.2);
}
.plan-edit-scope .plan-tool.active .plan-scope-state { color: #d9f3f0; }
.plan-toolkit[hidden] { display: none !important; }
.three-d-preview-notice {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin: 0.55rem 0;
  padding: 0.65rem 0.75rem;
  border: 1px solid #b8dedc;
  border-radius: 0.8rem;
  background: #f2fbfa;
}
.three-d-preview-notice[hidden] { display: none !important; }
body[data-app-screen="editor"] .object-toolkit { grid-template-columns: repeat(8, minmax(0, 1fr)); }
body[data-app-screen="editor"] .room-toolkit { grid-template-columns: repeat(7, minmax(0, 1fr)); }
body[data-app-screen="editor"] .opening-toolkit { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.plan-target-status {
  grid-column: 1 / -1;
  min-width: 0;
  padding: 0.4rem 0.65rem;
  border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--border));
  border-radius: 0.65rem;
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
  color: var(--text-muted);
  font-size: 0.78rem;
  font-weight: 650;
  line-height: 1.25;
}
.stair-issue-panel {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem;
  min-width: 0;
  padding: 0.5rem 0.65rem;
  border: 1px solid #d8a52b;
  border-radius: 0.65rem;
  background: #fff8df;
  color: #674b00;
  font-size: 0.78rem;
  font-weight: 650;
  line-height: 1.3;
}
.stair-issue-panel[hidden] { display: none !important; }
.stair-issue-panel > span { min-width: 0; }
.stair-issue-panel > .btn,
.stair-issue-panel > .editor-help { flex: 0 0 auto; }
.stair-issue-panel .editor-help > p { color: var(--text-main); font-weight: 500; }
body[data-app-screen="editor"] .stair-toolkit { grid-template-columns: repeat(10, minmax(0, 1fr)); }
.plan-tool-strip { display: contents; }

/* Navigate is the internal no-task state, not a user task. Do not present a
   selected target with a redundant "tools"/"switch" action while its complete
   task chooser is already open. The same button returns as the clear way back
   to all tools once a focused Move, Run, Width, Details, etc. task is active. */
body[data-app-screen="editor"][data-target-editor-kind="room"][data-room-tool="navigate"] #roomNavigateBtn,
body[data-app-screen="editor"][data-target-editor-kind="opening"][data-opening-tool="navigate"] #openingNavigateBtn,
body[data-app-screen="editor"][data-target-editor-kind="object"][data-object-tool="navigate"] #objectNavigateBtn,
body[data-app-screen="editor"][data-target-editor-kind="stair"][data-stair-tool="navigate"] #stairNavigateBtn {
  display: none;
}
.stair-toolkit .plan-tool strong b {
  display: block;
  margin-top: 0.08rem;
  color: #526477;
  font-size: 0.62rem;
  font-weight: 650;
}
.stair-workbench { align-items: start; }
.stair-task-panel,
.object-task-panel,
.opening-task-panel,
.room-task-panel,
.plan-global-task-panel {
  grid-column: 1 / -1;
  display: grid;
  min-width: 0;
  gap: 0.45rem;
  padding: 0.55rem;
  border: 1px solid #c9dedd;
  border-radius: 0.7rem;
  background: #f8fbfb;
}
body[data-app-screen="editor"][data-room-tool="navigate"] .room-task-panel,
body[data-app-screen="editor"][data-opening-tool="navigate"] .opening-task-panel,
body[data-app-screen="editor"][data-object-tool="navigate"] .object-task-panel {
  display: none;
}
:is(.room-toolkit, .opening-toolkit, .object-toolkit, .stair-toolkit)[data-write-pending="true"]
  :is(.room-task-panel, .opening-task-panel, .object-task-panel, .stair-task-panel) {
  opacity: 0.55;
  filter: grayscale(0.18);
  cursor: progress;
  transition: opacity 120ms ease-out, filter 120ms ease-out;
}
:is(.room-toolkit, .opening-toolkit, .object-toolkit, .stair-toolkit)[data-write-pending="true"]
  :is(.room-task-panel, .opening-task-panel, .object-task-panel, .stair-task-panel) * {
  cursor: progress;
}
.stair-task-controls,
.object-task-controls,
.opening-task-controls,
.room-task-controls,
.plan-global-task-controls {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: center;
  gap: 0.45rem;
}
.stair-task-controls[hidden] { display: none !important; }
.object-task-controls[hidden] { display: none !important; }
.opening-task-controls[hidden] { display: none !important; }
.room-task-controls[hidden] { display: none !important; }
.stair-task-controls > strong,
.stair-task-controls > span:not(.plan-tool-options-title),
.stair-task-controls > .plan-tool-options-title,
.stair-task-controls > .plan-object-target,
.stair-task-controls > .stair-height-lock,
.stair-task-controls > .stair-step-count,
.stair-task-controls > .stair-end-choice,
.stair-task-controls > .stair-task-subsection {
  grid-column: span 2;
}
.object-task-controls > strong,
.object-task-controls > span,
.object-task-controls > .plan-object-target,
.object-task-controls > .object-direction-controls,
.object-task-controls > .object-wall-move-controls {
  grid-column: span 2;
}
.object-task-controls > .object-precision-details { grid-column: 1 / -1; }
.opening-task-controls > strong,
.opening-task-controls > span { grid-column: span 2; }
.opening-task-controls > .opening-precision-details { grid-column: 1 / -1; }
.opening-task-controls > .opening-details-host { grid-column: 1 / -1; }
.opening-details-host { min-width: 0; }
.opening-details-host:empty { display: none; }
.opening-details-host > .editor-item { margin-top: 0; }
.object-task-controls > .object-details-host { grid-column: 1 / -1; }
.object-details-host { min-width: 0; }
.object-details-host:empty { display: none; }
.object-details-host > .editor-item { margin-top: 0; }
.room-task-controls > .room-details-host { grid-column: 1 / -1; }
.room-details-host { min-width: 0; }
.room-details-host:empty { display: none; }
.room-details-host > .editor-item { margin-top: 0; }
.room-task-controls > strong,
.room-task-controls > span,
.room-task-controls > .room-opening-create,
.room-task-controls > .room-stair-create { grid-column: span 2; }
.stair-task-controls > strong { color: #142235; font-size: 0.82rem; }
.stair-task-controls > span { color: #526477; font-size: 0.75rem; line-height: 1.35; }
.object-task-controls > strong { color: #142235; font-size: 0.82rem; }
.object-task-controls > span { color: #526477; font-size: 0.75rem; line-height: 1.35; }
.opening-task-controls > strong { color: #142235; font-size: 0.82rem; }
.opening-task-controls > span { color: #526477; font-size: 0.75rem; line-height: 1.35; }
.room-task-controls > strong { color: #142235; font-size: 0.82rem; }
.room-task-controls > span { color: #526477; font-size: 0.75rem; line-height: 1.35; }
.plan-global-task-controls > strong { color: #142235; font-size: 0.82rem; }
.plan-global-task-controls > span { color: #526477; font-size: 0.75rem; line-height: 1.35; }
.plan-task-heading {
  grid-column: 1 / -1;
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 0.45rem;
}
.plan-task-heading > strong { color: #142235; font-size: 0.82rem; }
.plan-task-heading-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.4rem;
}
.plan-task-heading-actions .plan-global-task-done {
  min-height: 44px;
  white-space: nowrap;
}
.plan-task-heading .editor-help > p {
  top: calc(100% + 0.4rem);
  right: 0;
  left: auto;
}
.plan-global-task-controls > strong,
.plan-global-task-controls > span,
.plan-global-task-controls > .plan-object-target,
.plan-global-task-controls > .plan-object-options,
.plan-global-task-controls > .plan-object-preset-stage,
.plan-global-task-controls > .plan-object-configuration { grid-column: span 2; }
.plan-view-options > .plan-floor-options,
.plan-view-options > .plan-view-mode-options,
.plan-view-options > .plan-view-more { grid-column: span 2; }
.plan-view-mode-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
  gap: 0.45rem;
}
.plan-view-more > summary {
  min-height: 44px;
  padding: 0.7rem 0.8rem;
  border: 1px solid #c9dedd;
  border-radius: 0.55rem;
  background: #fff;
  color: #142235;
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 700;
}
.plan-view-more[open] > summary { margin-bottom: 0.45rem; }
.plan-view-more-controls {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
  gap: 0.45rem;
}
.plan-view-more-controls > :is(.plan-tool-options-title, .inline-action-form,
  .target-delete-confirm, .room-snap-toggle) { grid-column: 1 / -1; }
.plan-global-task-done {
  grid-column: 1 / -1;
  justify-self: end;
  min-height: 44px;
}
.plan-room-attachment,
.plan-room-dimensions,
.plan-room-opening {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.45rem;
}
.plan-room-opening { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.plan-room-additional-storeys {
  grid-column: 1 / -1;
  display: grid;
  gap: 0.5rem;
}
.plan-room-storey-definition {
  min-width: 0;
  margin: 0;
  padding: 0.5rem;
  border: 1px solid #c9dedd;
  border-radius: 0.6rem;
  background: #fff;
}
.plan-room-storey-definition legend {
  padding: 0 0.3rem;
  color: #27555b;
  font-weight: 750;
}
.plan-room-storey-definition > * + * { margin-top: 0.45rem; }
.extension-storey-plan-button {
  grid-column: 1 / -1;
  width: 100%;
  min-height: 44px;
  border-color: #79aaa8;
  color: #174d52;
}
.extension-storey-plan-button.active,
.extension-storey-plan-button[aria-pressed="true"] {
  border-color: #62417b;
  background: #f2ebf7;
  color: #43295a;
  box-shadow: inset 0 0 0 1px #62417b;
}
.plan-room-storey-definition[data-plan-active="true"] {
  border-color: #62417b;
  box-shadow: 0 0 0 2px rgba(98, 65, 123, 0.14);
}
#planCreateRoomBtn { grid-column: 1 / -1; justify-self: stretch; }
.stair-inline-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.35rem;
}
.stair-task-controls > :is(.stair-inline-actions, .stair-opening-nudge-actions, .stair-turn-nudge-actions) {
  grid-column: span 2;
}
#stairFitStepsBtn { grid-column: span 2; }
#stairAddTurnBtn { grid-column: span 2; }
#stairOpeningSeedBtn,
#stairOpeningResetBtn,
#stairClearanceResetBtn { grid-column: span 2; }
:is(.stair-opening-nudge-actions, .stair-turn-nudge-actions) {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.35rem;
}
.stair-task-subsection { display: grid; gap: 0.35rem; }
.stair-height-lock {
  padding: 0.4rem 0.55rem;
  border: 1px solid #8dc9c5;
  border-radius: 0.55rem;
  color: #27555b !important;
  background: #eaf7f5;
  font-weight: 750;
}
.stair-step-count,
.stair-exact-dimension { display: grid; gap: 0.2rem; color: #526477; font-size: 0.72rem; font-weight: 700; }
.stair-step-count input,
.stair-exact-dimension input { width: 100%; min-height: 44px; }
.opening-precision-details,
.room-precision-details,
.stair-precision-details {
  grid-column: 1 / -1;
  min-width: 0;
}
.opening-precision-details > summary,
.room-precision-details > summary,
.stair-precision-details > summary {
  display: flex;
  min-height: 44px;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.45rem 0.65rem;
  border: 1px solid #8dc9c5;
  border-radius: 0.55rem;
  color: #27555b;
  background: #fff;
  cursor: pointer;
  font-size: 0.76rem;
  font-weight: 750;
  list-style: none;
}
.opening-precision-details > summary::-webkit-details-marker,
.room-precision-details > summary::-webkit-details-marker,
.stair-precision-details > summary::-webkit-details-marker { display: none; }
.opening-precision-details > summary::after,
.room-precision-details > summary::after,
.stair-precision-details > summary::after { content: "▾"; }
.opening-precision-details[open] > summary::after,
.room-precision-details[open] > summary::after,
.stair-precision-details[open] > summary::after { content: "▴"; }
.opening-nudge-controls,
.opening-exact-controls {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: end;
  gap: 0.45rem;
}
.opening-nudge-controls { grid-column: 1 / -1; }
.opening-exact-controls {
  margin-top: 0.45rem;
}
.opening-nudge-controls > *,
.opening-exact-controls > * { min-width: 0; }
.opening-exact-controls > .architecture-field-feedback { grid-column: 1 / -1; }
.stair-run-exact-controls {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: end;
  gap: 0.45rem;
  margin-top: 0.45rem;
}
.stair-run-exact-controls > * { min-width: 0; }
:is(.stair-field-feedback, .object-field-feedback, .architecture-field-feedback) {
  display: block;
  margin-top: 0.35rem;
  color: #991b1b;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.35;
}
:is(.stair-field-feedback, .object-field-feedback, .architecture-field-feedback)[hidden] { display: none; }
:is(.stair-validation-input, .object-validation-input, .architecture-validation-input)[aria-invalid="true"] {
  border-color: #b91c1c;
  box-shadow: 0 0 0 2px rgba(185, 28, 28, 0.16);
}
.stair-position-precision-controls {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: end;
  gap: 0.45rem;
  margin-top: 0.45rem;
}
.stair-position-precision-controls > .plan-object-target { grid-column: 1 / -1; }
.stair-position-precision-controls > * { min-width: 0; }
:is(.stair-opening-exact-controls, .stair-turn-exact-controls) {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: end;
  gap: 0.45rem;
  margin-top: 0.45rem;
}
:is(.stair-opening-exact-controls, .stair-turn-exact-controls) > .btn { grid-column: 1 / -1; }
:is(.stair-opening-exact-controls, .stair-turn-exact-controls) > * { min-width: 0; }
.stair-point-properties-controls {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: end;
  gap: 0.45rem;
  margin-top: 0.45rem;
}
.stair-point-properties-controls > .plan-object-target { grid-column: 1 / -1; }
.stair-point-properties-controls > * { min-width: 0; }
.room-precision-controls {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.45rem;
  margin-top: 0.45rem;
}
.room-precision-controls > * { min-width: 0; }
.room-move-controls {
  grid-column: 1 / -1;
  display: grid;
  gap: 0.35rem;
}
.room-corner-controls {
  grid-column: 1 / -1;
  display: grid;
  gap: 0.35rem;
}
.room-corner-controls > * { min-width: 0; }
.room-shape-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.45rem;
  margin-top: 0.45rem;
}
.room-shape-actions > .plan-tool-options-title { grid-column: 1 / -1; }
.room-wall-controls {
  grid-column: 1 / -1;
  display: grid;
  gap: 0.35rem;
}
.room-wall-controls > * { min-width: 0; }
.room-wall-exact-controls {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: end;
  gap: 0.45rem;
  margin-top: 0.45rem;
}
.room-wall-exact-controls > .architecture-field-feedback { grid-column: 1 / -1; }
.room-wall-exact-controls > * { min-width: 0; }
.object-precision-details {
  grid-column: 1 / -1;
  min-width: 0;
}
.object-precision-details[hidden] { display: none !important; }
.object-field-group:not([open]) > .object-field-group-content {
  display: none;
}
:is(.opening-precision-details, .room-precision-details, .stair-precision-details,
  .object-precision-details):not([open]) > :not(summary) {
  display: none;
}
.object-precision-details > summary {
  display: flex;
  min-height: 44px;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.45rem 0.65rem;
  border: 1px solid #8dc9c5;
  border-radius: 0.55rem;
  color: #27555b;
  background: #fff;
  cursor: pointer;
  font-size: 0.76rem;
  font-weight: 750;
  list-style: none;
}
.object-precision-details > summary::-webkit-details-marker { display: none; }
.object-precision-details > summary::after { content: "▾"; }
.object-precision-details[open] > summary::after { content: "▴"; }
.object-wall-exact-controls,
.object-size-precision-controls,
.object-exact-position {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: end;
  gap: 0.45rem;
  margin-top: 0.45rem;
}
.object-wall-exact-controls > .plan-tool-options-title,
.object-size-precision-controls > .plan-tool-options-title,
.object-rotation-precision-controls > .stair-exact-dimension,
.object-exact-position > .btn { grid-column: 1 / -1; }
.object-wall-exact-controls > *,
.object-size-precision-controls > *,
.object-exact-position > * { min-width: 0; }
.target-delete-confirm {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.45rem;
  padding: 0.65rem;
  border: 1px solid #dc9d92;
  border-radius: 0.6rem;
  background: #fff8f6;
}
.target-delete-confirm[hidden] { display: none !important; }
.target-delete-confirm > strong,
.target-delete-confirm > span { grid-column: 1 / -1; }
.target-delete-confirm > span { color: #78504b; font-size: 0.76rem; }
.inline-action-form {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.45rem;
  padding: 0.65rem;
  border: 1px solid #b9d5d3;
  border-radius: 0.6rem;
  background: #f5fbfa;
}
.inline-action-form[hidden] { display: none !important; }
.inline-action-form > strong,
.inline-action-form > span,
.inline-action-form > label { grid-column: 1 / -1; }
.inline-action-form > span,
.inline-action-form label > span { color: #526477; font-size: 0.76rem; }
.inline-action-form label { display: grid; gap: 0.3rem; }
.inline-action-form input { width: 100%; min-height: 44px; }
.inline-action-buttons {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.45rem;
}
.stair-end-choice {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.35rem;
}
.stair-end-choice .btn[aria-pressed="true"] {
  border-color: #b45309;
  background: #fff7ed;
  color: #8a3e08;
}
.plan-tool {
  display: flex;
  min-width: 0;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  padding: 0.45rem 0.35rem;
  border: 1px solid transparent;
  border-radius: 0.6rem;
  color: #27555b;
  background: transparent;
  cursor: pointer;
  text-align: center;
}
.plan-tool span { font-size: 1.05rem; }
.plan-tool strong { overflow: hidden; font-size: 0.72rem; text-overflow: ellipsis; }
.plan-tool:hover,
.plan-tool:focus-visible,
.plan-tool.active {
  border-color: #8dc9c5;
  background: #eaf7f5;
  outline: none;
}
.target-save-tool {
  border-color: #13756f;
  color: #fff;
  background: #13756f;
  box-shadow: 0 0.15rem 0.35rem rgba(19, 117, 111, 0.22);
}
.target-save-tool:hover,
.target-save-tool:focus-visible {
  border-color: #0c5d59;
  color: #fff;
  background: #0c5d59;
}
.target-save-tool:disabled { color: #fff; }
.target-save-tool[data-save-state="pending"],
.save-state-control[data-save-state="pending"] {
  border-color: #c66a12;
  color: #fff;
  background: #c66a12;
  box-shadow: 0 0.15rem 0.35rem rgba(198, 106, 18, 0.25);
}
.target-save-tool[data-save-state="pending"]:hover,
.target-save-tool[data-save-state="pending"]:focus-visible,
.save-state-control[data-save-state="pending"]:hover,
.save-state-control[data-save-state="pending"]:focus-visible {
  border-color: #a95408;
  color: #fff;
  background: #a95408;
}
.save-state-control[data-save-state="saved"] {
  border-color: #13756f;
  color: #fff;
  background: #13756f;
}
.save-state-control[data-save-state="saved"]:disabled {
  color: #fff;
  opacity: 1;
}
.plan-tool:disabled { cursor: not-allowed; opacity: 0.42; }
.plan-tool-options-title {
  color: #526477;
  font-size: 0.65rem;
  font-weight: 750;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.plan-tool-options-divider {
  margin-top: 0.2rem;
  padding-top: 0.45rem;
  border-top: 1px solid #dce7e8;
}
.room-opening-create { display: grid; gap: 0.35rem; }
.room-existing-connections {
  display: grid;
  gap: 0.35rem;
  padding-bottom: 0.55rem;
  border-bottom: 1px solid #d9e2e8;
}
.room-existing-connection-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  gap: 0.4rem;
}
.room-existing-connection-list .btn {
  min-height: 44px;
  justify-content: flex-start;
  text-align: left;
}
.room-opening-create[hidden],
.room-stair-create[hidden] { display: none !important; }
.room-connect-kind {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.35rem;
}
.room-connect-kind .btn { min-height: 46px; }
.room-connect-kind .btn.active {
  border-color: #0f8c96;
  background: #e6f7f6;
  color: #075e65;
}
.room-opening-create label { color: #526477; font-size: 0.72rem; font-weight: 700; }
.room-opening-create select { width: 100%; min-height: 44px; }
.room-opening-create .small { line-height: 1.3; }
.plan-floor-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.35rem; }
.plan-object-target { display: grid; gap: 0.25rem; }
.plan-object-target[hidden] { display: none !important; }
.plan-object-target select { width: 100%; }
.plan-object-options { display: grid; gap: 0.35rem; }
#planObjectMenu .plan-global-task-controls { grid-template-columns: minmax(0, 1fr); }
#planObjectMenu .plan-global-task-controls > * { grid-column: 1; }
#planObjectMenu .plan-object-target { width: min(100%, 28rem); }
#planObjectMenu .plan-object-options {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: start;
}
.plan-object-category { min-height: 48px; justify-content: center; font-weight: 750; }
.plan-object-preset-stage { display: grid; gap: 0.45rem; }
.plan-object-preset-stage[hidden] { display: none !important; }
.plan-object-preset-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.35rem; }
.plan-object-preset {
  display: grid;
  justify-items: start;
  gap: 0.12rem;
  min-width: 0;
  text-align: left;
}
.plan-object-preset > strong { font-size: 0.75rem; }
.plan-object-preset > span { color: #526477; font-size: 0.64rem; font-weight: 650; line-height: 1.25; }
.plan-object-configuration {
  display: grid;
  gap: 0.55rem;
  padding: 0.55rem;
  border: 1px solid #c9dedd;
  border-radius: 0.65rem;
  background: #fff;
}
.plan-object-configuration[hidden] { display: none !important; }
.plan-object-configuration-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.45rem; }
.plan-object-configuration-fields > label { display: grid; gap: 0.25rem; color: #526477; font-size: 0.72rem; font-weight: 700; }
.plan-object-configuration-fields input,
.plan-object-configuration-fields select { width: 100%; }
#planAddConfiguredObjectBtn { justify-self: end; }
.object-direction-controls {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.35rem;
}
.object-direction-controls .object-direction-up { grid-column: 2; }
.object-direction-controls .object-direction-left { grid-column: 1; }
.object-direction-controls .object-direction-down { grid-column: 2; }
.object-direction-controls .object-direction-right { grid-column: 3; }
.object-free-move-controls {
  grid-column: 1 / -1;
  display: grid;
  gap: 0.35rem;
}
.object-wall-position-controls {
  grid-column: 1 / -1;
  display: grid;
  gap: 0.35rem;
}
.object-wall-move-controls {
  display: grid;
  grid-template-columns: repeat(2, minmax(44px, 1fr));
  gap: 0.35rem;
}
.object-size-nudge-controls {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.35rem;
}
.object-dimension-nudge {
  display: grid;
  grid-template-columns: repeat(2, minmax(44px, 1fr));
  gap: 0.25rem;
  min-width: 0;
}
.object-dimension-nudge > .plan-tool-options-title {
  grid-column: 1 / -1;
  text-align: center;
}
.object-free-move-controls[hidden],
.object-wall-position-controls[hidden],
.object-direction-controls[hidden] { display: none !important; }
.plan-mobile-home-action { display: none; }

/* View navigation belongs to the canvas, not to an editing task. Keep it
   available while rooms, openings, stairs or contents are selected so a
   clipped handle can be brought into reach without leaving that task. */
.plan-viewport-controls {
  position: relative;
  z-index: 2;
  display: grid;
  justify-content: end;
  gap: 0.3rem;
  margin-top: 0.35rem;
  padding: 0.35rem;
  border: 1px solid rgba(82, 100, 119, 0.28);
  border-radius: 0.75rem;
  background: rgba(255, 255, 255, 0.82);
}
.plan-viewport-controls[hidden] { display: none !important; }
.plan-viewport-hint {
  align-self: center;
  color: #526477;
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
}
.plan-viewport-drag {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.4rem;
}
.plan-viewport-drag #planDragViewBtn[aria-pressed="true"] {
  border-color: #2563eb;
  background: #dbeafe;
  color: #1e3a8a;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.16);
}
.plan-viewport-zoom,
.plan-viewport-pan { display: flex; gap: 0.25rem; }
.plan-viewport-controls .btn {
  min-width: 44px;
  min-height: 44px;
  padding: 0.35rem;
  background: #fff;
  font-weight: 750;
}
.plan-viewport-controls #planFitBtn { min-width: 3.4rem; }
.plan-viewport-controls .btn:disabled { opacity: 0.48; }
#modelViewport.view-split #house { grid-column: 1; grid-row: 1; }
#modelViewport.view-split #house3d { grid-column: 2; grid-row: 1; }
#modelViewport.view-split .plan-viewport-controls {
  grid-column: 1 / -1;
  grid-row: 2;
}

/* One touch contract at every viewport width: the plan remains a scroll and
   pinch surface, while an explicit drag target owns only its own gesture. */
body[data-app-screen="editor"] #house { touch-action: pan-y pinch-zoom; }
body[data-app-screen="editor"][data-plan-view-drag="true"] #house { touch-action: none; }
body[data-app-screen="editor"][data-opening-tool="position"] #house [data-opening-drag="position"],
body[data-app-screen="editor"][data-opening-tool="width"] #house [data-opening-drag="width"],
body[data-app-screen="editor"] #house [data-model-drag="handle"] { touch-action: none; }

/* A selected target task can be substantially taller than the compact global
   toolbar. On desktop, keeping any focused workbench sticky lets it cover the
   plan while the page scrolls, leaving real drag handles present but
   untouchable underneath it. Keep active room, opening, object and stair
   controls in document flow so the editable plan always starts below them.
   Narrow-screen workbenches retain their dedicated layouts below. */
@media (min-width: 901px) {
  /* Wide model columns have room for all eight viewport actions in one row.
     Avoid spending a second row below the focused plan, where the navigator
     can otherwise fall just beyond a conventional 720px desktop viewport. */
  body[data-app-screen="editor"] .plan-viewport-controls {
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }

  body[data-app-screen="editor"][data-target-editor-kind="room"]:not([data-room-tool="navigate"])
    .room-toolkit,
  body[data-app-screen="editor"][data-target-editor-kind="opening"]:not([data-opening-tool="navigate"])
    .opening-toolkit,
  body[data-app-screen="editor"][data-target-editor-kind="object"]:not([data-object-tool="navigate"])
    .object-toolkit,
  body[data-app-screen="editor"][data-target-editor-kind="stair"]:not([data-stair-tool="navigate"])
    .stair-toolkit {
    position: relative;
    top: auto;
  }
}

@media (max-width: 900px) {
  /* A combined Plan + 3D canvas is useful side-by-side on desktop but becomes
     two competing vertical workspaces on a phone. Compact editing keeps the
     editable plan and deliberate 3D preview as separate choices. */
  body[data-app-screen="editor"] [data-plan-view="split"] {
    display: none !important;
  }

  /* Compact editing has one session completion owner: Finish replaces
     Navigate in the plan toolbar once local task work is done. The desktop
     header action otherwise sits behind fixed task sheets and looks like a
     second, partially obscured save route. */
  body[data-app-screen="editor"]
    #modelPanel > .floor-header.editor-screen .model-toolbar-actions {
    display: none;
  }

  /* The compact toolbar and active task already identify the editor. Keep the
     page heading in the accessibility tree but visually compact in every
     mobile state so selecting a target cannot shift the workspace upward. */
  body[data-app-screen="editor"] #modelPanel > h2.editor-screen {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
  /* Keep the shared operation live region available to assistive technology
     without letting routine busy/success copy move the compact plan. Errors
     remain visible in this one canonical surface. Apply the same geometry to
     global and target tasks so completing an edit cannot move the workspace. */
  body[data-app-screen="editor"]
    #modelPanel > .floor-header.editor-screen {
    display: block;
    margin: 0 0 0.45rem;
  }
  body[data-app-screen="editor"]
    #modelPanel > .floor-header.editor-screen .floor-left {
    display: block;
  }
  body[data-app-screen="editor"]
    #modelPanel > .floor-header.editor-screen .model-operation-status:not([data-state="error"]) {
    position: absolute;
    width: 1px;
    height: 1px;
    min-height: 0;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
  body[data-app-screen="editor"]
    #modelPanel > .floor-header.editor-screen .model-operation-status[data-state="error"] {
    display: block;
    min-height: 0;
    padding: 0.6rem 0.7rem;
    border: 1px solid #fecaca;
    border-radius: 0.65rem;
    background: #fef2f2;
    font-weight: 700;
    line-height: 1.35;
  }

  /* A selected target identifies the symbols currently being edited. Keep the
     plan adjacent to its bounded task sheet instead of repeating global model
     and temperature legends between them; both legends return with Choose task. */
  body[data-app-screen="editor"][data-target-editor-active="true"] .model-legend,
  body[data-app-screen="editor"][data-target-editor-active="true"]
    .heat-legend:not(#cameraControls) {
    display: none !important;
  }

  /* OrbitControls writes touch-action:none inline. On a narrow dashboard or
     editor that turns the dominant 3D pane into a page-scroll trap. Keep
     horizontal camera orbit available, but return vertical pan and pinch to
     the browser in both app screens. */
  body:is([data-app-screen="dashboard"], [data-app-screen="editor"]) #house3d,
  body:is([data-app-screen="dashboard"], [data-app-screen="editor"]) #house3d canvas {
    touch-action: pan-y pinch-zoom !important;
  }

  /* Keep view navigation in one dedicated row above the plan. A fixed task
     sheet can begin immediately below a short phone plan; the previous row
     after the SVG was covered by that sheet. An overlay would instead cover
     stair endpoints, so the compact model viewport owns an explicit grid row
     that remains independent of every editing task. */
  body[data-app-screen="editor"] #modelViewport {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.3rem;
  }
  #modelViewport .plan-viewport-controls {
    position: relative;
    z-index: 2;
    top: auto;
    right: auto;
    display: grid;
    grid-column: 1;
    grid-row: 1;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.25rem;
    width: 100%;
    margin: 0;
    padding: 0.25rem;
    background: rgba(255, 255, 255, 0.92);
    overflow: visible;
  }
  #modelViewport .plan-viewport-controls :is(.plan-viewport-zoom, .plan-viewport-pan) {
    display: grid;
    grid-template-columns: repeat(4, minmax(44px, 1fr));
    gap: 0;
    min-width: 0;
  }
  #modelViewport .plan-viewport-controls .plan-viewport-zoom {
    grid-template-columns: repeat(3, minmax(44px, 1fr));
  }
  #modelViewport .plan-viewport-controls #planFitBtn {
    min-width: 44px;
  }
  body[data-app-screen="editor"] #modelViewport #house {
    grid-column: 1;
    grid-row: 2;
  }
  body[data-app-screen="editor"] #modelViewport #house3d {
    grid-column: 1;
    grid-row: 3;
  }
  #modelViewport.view-split #house,
  #modelViewport.view-split #house3d,
  #modelViewport.view-split .plan-viewport-controls {
    grid-column: 1;
  }
  #modelViewport.view-split .plan-viewport-controls { grid-row: 1; }
  #modelViewport.view-split #house { grid-row: 2; }
  #modelViewport.view-split #house3d { grid-row: 3; }

  /* Plan + 3D remains the ordinary editor, but a concrete target task can be
     performed only on the plan. Do not leave the non-editable 3D pane and its
     camera controls competing for half of a phone workspace while Move,
     dimensions, details or another focused task is active. Choose task restores
     each target's navigate state and therefore the coordinated split view. */
  body[data-app-screen="editor"][data-target-editor-active="true"]:is(
    [data-room-tool]:not([data-room-tool="navigate"]),
    [data-opening-tool]:not([data-opening-tool="navigate"]),
    [data-object-tool]:not([data-object-tool="navigate"]),
    [data-stair-tool]:not([data-stair-tool="navigate"])
  ) #house3d,
  body[data-app-screen="editor"][data-target-editor-active="true"]:is(
    [data-room-tool]:not([data-room-tool="navigate"]),
    [data-opening-tool]:not([data-opening-tool="navigate"]),
    [data-object-tool]:not([data-object-tool="navigate"]),
    [data-stair-tool]:not([data-stair-tool="navigate"])
  ) #cameraControls {
    display: none !important;
  }
  /* Selection and creation tasks share one compact plan-only context. The
     normal target workspace returns as soon as the chosen edit begins. */
  body[data-app-screen="editor"]:is(
    [data-plan-task="object"],
    [data-plan-task="select"],
    [data-plan-task="room"],
    [data-room-tool="connect"]
  ) #house3d,
  body[data-app-screen="editor"]:is(
    [data-plan-task="object"],
    [data-plan-task="select"],
    [data-plan-task="room"],
    [data-room-tool="connect"]
  ) #cameraControls,
  body[data-app-screen="editor"]:is(
    [data-plan-task="object"],
    [data-plan-task="select"],
    [data-plan-task="room"],
    [data-room-tool="connect"]
  ) .model-legend,
  body[data-app-screen="editor"]:is(
    [data-plan-task="object"],
    [data-plan-task="select"],
    [data-plan-task="room"],
    [data-room-tool="connect"]
  ) .heat-legend:not(#cameraControls) {
    display: none !important;
  }
  body[data-app-screen="editor"]:is(
    [data-plan-task="object"],
    [data-plan-task="select"],
    [data-plan-task="room"],
    [data-room-tool="connect"]
  ) #modelViewport #house {
    display: block !important;
    height: 10rem !important;
  }
  /* Categories are four equal first-step choices. Keep them all above the
     short-phone fold as a 2 x 2 touch grid instead of making the fourth choice
     depend on an otherwise unnecessary nested scroll. */
  #planObjectMenu .plan-object-options {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  body[data-app-screen="editor"] #homeDashboardBtn { display: none; }
  body[data-app-screen="editor"] #modelViewport:not(.view-split) #house,
  body[data-app-screen="editor"] #modelViewport:not(.view-split) #house3d {
    height: clamp(18rem, 54dvh, 30rem);
  }
  body[data-app-screen="editor"] #modelViewport.view-split #house,
  body[data-app-screen="editor"] #modelViewport.view-split #house3d {
    height: clamp(16rem, 42dvh, 22rem);
  }
  body[data-app-screen="editor"] .plan-toolkit {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    top: max(0.35rem, env(safe-area-inset-top));
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  body[data-app-screen="editor"] .plan-global-toolkit {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  /* Structure and Contents are persistent editing modes, not two icon-sized
     actions. Give their grouped control two toolbar tracks so both names stay
     visible on phones instead of collapsing to ambiguous S… / C… labels. */
  body[data-app-screen="editor"] .plan-global-toolkit .plan-edit-scope .plan-tool strong {
    overflow: hidden;
    font-size: 0.56rem;
    white-space: nowrap;
  }
  body[data-app-screen="editor"] .plan-global-toolkit .plan-edit-scope .plan-tool {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "label"
      "state";
    padding-inline: 0.15rem;
  }
  body[data-app-screen="editor"] .plan-global-toolkit .plan-edit-scope .plan-tool > span {
    display: none;
  }
  /* Keep the consolidated navigation controls in reach while the user scrolls
     between the plan and coordinated 3D view. Focused tasks become ordinary
     document content below, except for the explicit short-landscape rail. */
  body[data-app-screen="editor"][data-plan-task="navigate"] .plan-global-toolkit {
    position: sticky;
    top: max(0.35rem, env(safe-area-inset-top));
  }
  body[data-app-screen="editor"][data-plan-task="navigate"] #planFinishBtn { display: grid; }
  body[data-app-screen="editor"][data-plan-task="object"] .plan-global-toolkit {
    height: auto;
    align-content: start;
  }
  body[data-app-screen="editor"][data-plan-task="select"] .plan-global-toolkit {
    height: auto;
    align-content: start;
  }
  body[data-app-screen="editor"][data-plan-task="room"] .plan-global-toolkit {
    height: auto;
    align-content: start;
  }
  /* Compact workbenches share one in-flow position owner. This prevents a
     medium-height landscape screen from inheriting an invisible fixed layer
     over the plan and keeps native page scrolling available over controls. */
  body[data-app-screen="editor"] :is(.room-toolkit, .opening-toolkit, .object-toolkit, .stair-toolkit) {
    position: static;
    inset: auto;
    grid-template-columns: minmax(0, 1fr);
    max-height: none;
    margin-top: 0.5rem;
    overflow: visible;
  }
  /* Editing an existing target is a visual task: keep the plan ahead of every
     room, opening, object and stair workbench state instead of moving the drag
     surface below the controls when a task opens. Choosers, task controls and
     repair advice remain in normal flow immediately below the plan, so all
     controls stay reachable without an overlay taking canvas ownership. */
  body[data-app-screen="editor"][data-target-editor-active="true"] #modelPanel {
    display: flex;
    flex-direction: column;
  }
  body[data-app-screen="editor"][data-target-editor-active="true"] #modelViewport {
    order: 1;
  }
  body[data-app-screen="editor"][data-target-editor-active="true"]
    :is(#roomToolkit, #openingToolkit, #objectToolkit, #stairToolkit) {
    order: 2;
  }
  body[data-app-screen="editor"][data-target-editor-active="true"]
    #modelPanel > :is(.model-legend, .heat-legend, #cameraControls) {
    order: 3;
  }
  /* Short landscape restores sticky task controls inside its explicit rail;
     all other compact workbenches keep their strips in document flow. */
  body[data-app-screen="editor"][data-target-editor-active="true"]
    :is(.room-tool-strip, .opening-tool-strip, .object-tool-strip, .stair-tool-strip) {
    position: static;
    padding-block: 0.2rem;
    background: var(--surface);
  }
  body[data-app-screen="editor"][data-room-tool="connect"] .room-toolkit {
    height: auto;
    align-content: start;
  }
  :is(.room-toolkit, .opening-toolkit, .object-toolkit, .stair-toolkit) .plan-target-status {
    grid-column: 1;
    padding: 0.32rem 0.5rem;
    font-size: 0.7rem;
  }
  .stair-issue-panel {
    grid-column: 1;
    align-items: stretch;
    flex-direction: column;
    padding: 0.45rem 0.5rem;
    font-size: 0.72rem;
  }
  .stair-issue-panel .stair-issue-help { width: 100%; }
  .stair-issue-panel .stair-issue-help > p {
    position: static;
    width: 100%;
    margin-top: 0.35rem;
    box-shadow: none;
  }
  :is(.room-tool-strip, .opening-tool-strip, .object-tool-strip, .stair-tool-strip) {
    grid-column: 1;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.25rem;
    min-width: 0;
    overflow: visible;
  }
  /* Nine visible stair actions form three readable rows at phone width. The
     same three columns naturally fit the active task's Choose, task and Close
     actions, so there is one target-specific layout rather than a second
     compressed chooser state. */
  body[data-app-screen="editor"][data-target-editor-kind="stair"] .stair-tool-strip {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  body[data-app-screen="editor"]:is(
    [data-target-editor-kind="room"]:not([data-room-tool="navigate"]),
    [data-target-editor-kind="opening"]:not([data-opening-tool="navigate"]),
    [data-target-editor-kind="object"]:not([data-object-tool="navigate"])
  ) :is(.room-tool-strip, .opening-tool-strip, .object-tool-strip) {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .object-workbench .plan-tool strong {
    overflow: visible;
    white-space: normal;
  }
  .object-workbench .plan-tool strong b {
    display: block;
    margin-top: 0.08rem;
    color: #526477;
    font-size: 0.56rem;
    font-weight: 650;
    line-height: 1.12;
    white-space: normal;
  }
  .object-workbench #objectMoveValue,
  .object-workbench #objectSizeValue { display: none; }
  :is(.room-toolkit, .opening-toolkit, .object-toolkit, .stair-toolkit)
    :is(.room-task-panel, .opening-task-panel, .object-task-panel, .stair-task-panel) {
    grid-column: 1;
  }
  .plan-mobile-home-action { display: block; }
  .three-d-preview-notice { align-items: stretch; flex-direction: column; }
  .three-d-preview-notice .btn { width: 100%; min-height: 44px; }
  .plan-tool {
    min-height: 52px;
    flex-direction: column;
    gap: 0.1rem;
    padding: 0.3rem 0.08rem;
  }
  .plan-tool span { line-height: 1; }
  .plan-tool strong { max-width: 100%; font-size: 0.62rem; }
  .stair-task-panel { overflow: visible; }
  .object-task-panel { overflow: visible; }
  .opening-task-panel { overflow: visible; }
  .room-task-panel { overflow: visible; }
  .plan-global-task-panel { overflow: visible; }
  .stair-task-controls,
  .object-task-controls,
  .opening-task-controls,
  .room-task-controls,
  .plan-global-task-controls { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .plan-room-attachment,
  .plan-room-dimensions,
  .plan-room-opening { grid-template-columns: 1fr; }
  .stair-task-controls > strong,
  .stair-task-controls > span:not(.plan-tool-options-title),
  .stair-task-controls > .plan-tool-options-title,
  .stair-task-controls > .plan-object-target,
  .stair-task-controls > .stair-height-lock,
  .stair-task-controls > .stair-step-count,
  .stair-task-controls > .stair-task-subsection { grid-column: 1 / -1; }
  .stair-task-controls > :is(.stair-inline-actions, .stair-opening-nudge-actions, .stair-turn-nudge-actions) { grid-column: 1 / -1; }
  .object-task-controls > strong,
  .object-task-controls > span,
  .object-task-controls > .plan-object-target,
  .object-task-controls > .object-direction-controls,
  .object-task-controls > .object-wall-move-controls,
  .object-task-controls > .object-precision-details { grid-column: 1 / -1; }
  .opening-task-controls > strong,
  .opening-task-controls > span { grid-column: 1 / -1; }
  .room-task-controls > strong,
  .room-task-controls > span,
  .room-task-controls > .room-opening-create,
  .room-task-controls > .room-stair-create { grid-column: 1 / -1; }
  .plan-global-task-controls > strong,
  .plan-global-task-controls > span,
  .plan-global-task-controls > .plan-object-target,
  .plan-global-task-controls > .plan-object-options,
  .plan-global-task-controls > .plan-object-preset-stage,
  .plan-global-task-controls > .plan-object-configuration,
  .plan-view-options > .plan-floor-options,
  .plan-view-options > .plan-view-more { grid-column: 1 / -1; }
  /* Object type is a quick choice, not a catalogue-reading task. Keep every
     common type reachable above a short phone's task-sheet fold while the
     full physical preset remains in the accessible button name. */
  .plan-object-preset-choices {
    grid-template-columns: repeat(auto-fit, minmax(6.25rem, 1fr));
  }
  .plan-object-preset {
    min-height: 48px;
    place-content: center;
    justify-items: center;
    text-align: center;
  }
  .plan-object-preset > span {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }
  #planObjectMenu .plan-object-target {
    display: block;
    width: 100%;
  }
  #planObjectMenu .plan-object-target > span { white-space: nowrap; }
  .plan-object-configuration-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .plan-object-configuration-fields > label:last-child:nth-child(odd) { grid-column: 1 / -1; }
  /* The selected-object toolbar already names Actions and describes its job.
     Keep the embedded editor focused on the editable identity instead of
     repeating that heading, and retain the established two-field desktop
     grouping on phones where both controls remain comfortably touch sized. */
  body[data-target-editor-kind="object"][data-object-tool="actions"]
    #objectActionsMenu > :is(strong, #objectActionsStatus) { display: none; }
  .object-details-host .editor-item-summary,
  .object-details-host .object-field-group-summary {
    align-items: baseline;
    flex-direction: row;
  }
  .object-details-host .editor-item-summary { min-height: 44px; }
  .object-details-host .object-row,
  .object-details-host .object-field-group-content {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .object-details-host .object-field-group,
  .object-details-host .object-field-group-content > .validation-item {
    grid-column: 1 / -1;
  }
  #planAddConfiguredObjectBtn { width: 100%; }
  .plan-room-dimensions { grid-template-columns: minmax(0, 1fr); }
  #planCreateRoomBtn { width: 100%; }
}

@media (max-width: 350px) {
  .object-details-host .object-field-group-content {
    grid-template-columns: minmax(0, 1fr);
  }
  .object-details-host .object-field-group-content > .validation-item {
    grid-column: auto;
  }
}

/* A chosen manipulation is a focused task at every viewport size. Retain the
   stable Choose task, Add and Save/Close controls plus the active task only;
   this removes the second row of unrelated choices that otherwise pushes the
   plan and its opposite drag handle below a normal desktop viewport. */
body[data-app-screen="editor"][data-target-editor-kind="stair"]:not([data-stair-tool="navigate"])
  .stair-tool-strip .plan-tool,
body[data-app-screen="editor"][data-target-editor-kind="room"]:not([data-room-tool="navigate"])
  .room-tool-strip .plan-tool,
body[data-app-screen="editor"][data-target-editor-kind="opening"]:not([data-opening-tool="navigate"])
  .opening-tool-strip .plan-tool,
body[data-app-screen="editor"][data-target-editor-kind="object"]:not([data-object-tool="navigate"])
  .object-tool-strip .plan-tool {
  display: none;
}
body[data-app-screen="editor"][data-target-editor-kind="stair"]:not([data-stair-tool="navigate"])
  .stair-tool-strip :is(#stairNavigateBtn, #stairDoneBtn),
body[data-app-screen="editor"][data-stair-tool="move"] #stairMoveBtn,
body[data-app-screen="editor"][data-stair-tool="run"] #stairRunBtn,
body[data-app-screen="editor"][data-stair-tool="width"] #stairWidthBtn,
body[data-app-screen="editor"][data-stair-tool="turns"] #stairTurnsBtn,
body[data-app-screen="editor"][data-stair-tool="steps"] #stairStepsBtn,
body[data-app-screen="editor"][data-stair-tool="opening"] #stairOpeningBtn,
body[data-app-screen="editor"][data-stair-tool="clearance"] #stairClearanceBtn,
body[data-app-screen="editor"][data-stair-tool="actions"] #stairActionsBtn,
body[data-app-screen="editor"][data-target-editor-kind="room"]:not([data-room-tool="navigate"])
  .room-tool-strip :is(#roomNavigateBtn, #roomAddAnotherBtn, #roomDoneBtn),
body[data-app-screen="editor"][data-room-tool="move"] #roomMoveBtn,
body[data-app-screen="editor"][data-room-tool="corner"] #roomCornerBtn,
body[data-app-screen="editor"][data-room-tool="wall"] #roomWallBtn,
body[data-app-screen="editor"][data-room-tool="connect"] #roomConnectBtn,
body[data-app-screen="editor"][data-room-tool="details"] #roomDetailsBtn,
body[data-app-screen="editor"][data-target-editor-kind="opening"]:not([data-opening-tool="navigate"])
  .opening-tool-strip :is(#openingNavigateBtn, #openingAddAnotherBtn, #openingDoneBtn),
body[data-app-screen="editor"][data-opening-tool="position"] #openingPositionBtn,
body[data-app-screen="editor"][data-opening-tool="width"] #openingWidthBtn,
body[data-app-screen="editor"][data-opening-tool="actions"] #openingActionsBtn,
body[data-app-screen="editor"][data-target-editor-kind="object"]:not([data-object-tool="navigate"])
  .object-tool-strip :is(#objectNavigateBtn, #objectAddAnotherBtn, #objectDoneBtn),
body[data-app-screen="editor"][data-object-tool="move"] #objectMoveBtn,
body[data-app-screen="editor"][data-object-tool="placement"] #objectPlacementBtn,
body[data-app-screen="editor"][data-object-tool="size"] #objectSizeBtn,
body[data-app-screen="editor"][data-object-tool="rotate"] #objectRotateBtn,
body[data-app-screen="editor"][data-object-tool="actions"] #objectActionsBtn {
  display: flex;
}

/* A staircase is edited in its measured 2D room context. Remove the
   non-editable 3D duplicate at every width while that target is selected and
   let the plan use the full model column. The coordinated split view returns
   as soon as stair editing is completed. */
body[data-app-screen="editor"][data-target-editor-kind="stair"] #house3d,
body[data-app-screen="editor"][data-target-editor-kind="stair"] #cameraControls {
  display: none !important;
}
body[data-app-screen="editor"][data-target-editor-kind="stair"] #modelViewport.view-split {
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 901px) {
  /* The selected task is already named in the pressed tool and live status.
     Remove its duplicate heading/instruction row on wide screens so the
     direct manipulation surface stays larger and fully visible. */
  body[data-app-screen="editor"][data-target-editor-kind="stair"]
    .stair-task-controls > :is(strong, span:not(.plan-tool-options-title)) {
    display: none;
  }
  /* The full-width plan needs less vertical space than the former half-width
     split pane. Keep both direct-manipulation endpoints above a conventional
     800px desktop fold without shrinking their 44px hit targets. */
  body[data-app-screen="editor"][data-target-editor-kind="stair"]:not([data-stair-tool="navigate"])
    #modelViewport #house {
    height: clamp(10rem, 24dvh, 16rem);
  }
}

@media (max-width: 900px) {
  /* A selected stair must expose its task choices before any repair advice.
     This ordering also applies to the navigate/chooser state, where an
     attachment warning previously pushed the actual controls below the fold. */
  body[data-app-screen="editor"][data-target-editor-kind="stair"]
    .stair-toolkit .plan-target-status { order: 1; }
  body[data-app-screen="editor"][data-target-editor-kind="stair"]
    .stair-toolkit .stair-tool-strip { order: 2; }
  body[data-app-screen="editor"][data-target-editor-kind="stair"]
    .stair-toolkit .stair-task-panel { order: 3; }
  body[data-app-screen="editor"][data-target-editor-kind="stair"]
    .stair-toolkit .stair-issue-panel { order: 4; }

  /* Once one stair manipulation task is active, keep the active controls
     ahead of advisory warnings and size the plan for direct manipulation.
     Do not cap the toolkit here: portrait workbenches are in document flow,
     while the short-landscape dock owns its explicit maximum below. */
  body[data-app-screen="editor"][data-target-editor-active="true"][data-target-editor-kind="stair"]:not([data-stair-tool="navigate"])
    #modelViewport #house {
    height: 54dvh;
    min-height: 0;
  }
}

body[data-app-screen="editor"] #roomsPanel { max-height: none; }

@media (max-width: 900px) {
  .auth-gate { align-items: end; padding: 1rem; }
  .auth-hero-image { top: 1rem; right: 1rem; width: calc(100% - 2rem); max-height: 56vh; transform: none; }
  .auth-hero-shade { background: linear-gradient(180deg, rgba(7,17,31,0.05) 8%, rgba(7,17,31,0.18) 45%, rgba(7,17,31,0.97) 66%); }
  .auth-card { width: 100%; padding: 1.25rem; }
  .auth-card h1 { font-size: clamp(2.6rem, 13vw, 4.6rem); }
  .auth-product-name { margin-bottom: 1rem !important; }

  .app-wrap { grid-template-columns: 1fr; }
  body[data-app-screen="editor"] #modelPanel { order: 1; }
  body[data-app-screen="editor"] .editor-sidebar {
    display: none;
    order: 2;
  }
  .selected-editor-item { scroll-margin-top: 4rem; }
  .journey-panel { align-self: auto; }
}

@media (max-width: 560px) {
  .auth-hero-image { max-height: 48vh; }
  .heatflow-scenario-panel > summary > span:first-child { align-items: flex-start; flex-direction: column; gap: 0.1rem; }
  .heatflow-scenario-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .heatflow-scenario-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .heatflow-scenario-actions .btn { width: 100%; }
  .journey-panel { padding: 1rem; }
  .starter-fields { grid-template-columns: 1fr; }
  .starter-fields label:last-child { grid-column: auto; }
  .model-context-header { align-items: stretch; flex-direction: column; }
  .model-context-header .btn { width: 100%; }
  .dashboard-home-identity { align-items: stretch; flex-direction: column; }
  .dashboard-home-actions { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
  .dashboard-home-actions .home-title-control { grid-column: 1 / -1; min-width: 0; }
  .dashboard-home-actions > .btn { width: auto; }
  .house-air-status { align-self: flex-start; }
  .display-toolbar { align-items: center; flex-wrap: nowrap; }
  .display-tabs { flex: 0 0 auto; }
  .display-tabs .btn { width: 2.75rem; }
  .display-options { display: flex; flex: 0 1 auto; min-width: 0; }
  .display-options > .btn { width: auto; }
  body[data-app-screen="dashboard"][data-display-mode="model"] .display-toolbar {
    max-width: calc(100% - 1.8rem);
    overflow: visible;
  }
  body[data-app-screen="dashboard"][data-display-mode="model"] #displayLabelBtn {
    max-width: 7.5rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  body[data-app-screen="dashboard"][data-display-mode="model"] #heatflowScenarioPanel:not([open]) {
    top: 4.5rem;
  }
  .heatflow-scenario-panel > summary > span:first-child { align-items: flex-start; flex-direction: column; gap: 0.1rem; }
  .heatflow-scenario-fields { grid-template-columns: 1fr 1fr; }
  .heatflow-scenario-actions { display: grid; grid-template-columns: 1fr 1fr 1fr; }
  .heatflow-scenario-actions .btn { width: 100%; }
  .heatflow-playback-status { align-items: flex-start; flex-direction: column; gap: 0.15rem; }
  .scenario-cost-rates { grid-template-columns: 1fr 1fr; }
  .display-floor-menu > summary { height: 100%; }
  .air-quality-heading { align-items: stretch; flex-direction: column; }
  .air-quality-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .air-quality-heading .btn { width: 100%; }
  .monitor-setup { padding: 0.65rem; }
  .monitor-choice-grid { grid-template-columns: 1fr; }
  body[data-app-screen="dashboard"] .top-bar,
  body[data-app-screen="create"] .top-bar {
    flex-direction: row;
    align-items: center;
  }
  body[data-app-screen="dashboard"] .top-right,
  body[data-app-screen="create"] .top-right { display: flex; }
  body[data-app-screen="dashboard"] #house,
  body[data-app-screen="dashboard"] #house3d,
  body[data-app-screen="create"] #house,
  body[data-app-screen="create"] #house3d { height: min(54vh, 430px); }
}

@media (max-width: 900px) and (max-height: 500px) {
  .auth-gate { align-items: center; }
  .auth-hero-image { display: none; }
  .auth-hero-shade { background: linear-gradient(135deg, rgba(7, 17, 31, 0.97), rgba(16, 41, 58, 0.94)); }
  .auth-card { padding: 0.75rem 1.25rem; }
  .auth-card h1 { font-size: clamp(2.6rem, 11vw, 3.6rem); }
  .auth-product-name { margin: 0.45rem 0 0.65rem !important; }
  .auth-access { margin-top: 0.35rem; }
}

@media (max-width: 900px) and (orientation: portrait) {
  /* Every compact editor state keeps the document's normal vertical scroll.
     Explicit SVG handles remain the sole no-scroll gesture owners. */
  html:has(body[data-app-screen="editor"]),
  html > body[data-app-screen="editor"] {
    overflow-y: auto;
    overscroll-behavior-y: auto;
  }

  /* A focused task can otherwise finish only a few pixels below a tall phone
     viewport. Browser focus anchoring may consume that marginal range and make
     Page Down or a vertical swipe appear not to work. Keep one modest,
     safe-area-aware runway after the in-flow workbench; it belongs to the
     document rather than a fixed sheet and does not cover the model. */
  body[data-app-screen="editor"][data-target-editor-active="true"] .app-wrap {
    padding-bottom: max(4rem, calc(2rem + env(safe-area-inset-bottom)));
  }

  /* Initial navigation and selected targets are wholly in document flow, so
     put their editable plan before the independent viewport controls. */
  body[data-app-screen="editor"]:is(
    [data-plan-task="navigate"],
    [data-plan-task="view"],
    [data-target-editor-active="true"]
  ) #modelViewport #house {
    grid-row: 1;
  }
  body[data-app-screen="editor"]:is(
    [data-plan-task="navigate"],
    [data-plan-task="view"],
    [data-target-editor-active="true"]
  ) #modelViewport .plan-viewport-controls {
    grid-row: 2;
  }
  body[data-app-screen="editor"]:is(
    [data-plan-task="navigate"],
    [data-plan-task="view"],
    [data-target-editor-active="true"]
  ) #modelViewport #house3d {
    grid-row: 3;
  }

  /* Keep the complete initial plan navigator inside a conventional phone
     viewport. Users can enlarge and pan the drawing from the always-visible
     controls; making the untouched canvas 54dvh tall put those controls below
     the fold and made the opening editor feel immovable. */
  body[data-app-screen="editor"][data-plan-task="navigate"]:not([data-target-editor-active="true"])
    #modelViewport #house,
  body[data-app-screen="editor"][data-target-editor-active="true"]:is(
    [data-room-tool="navigate"],
    [data-opening-tool="navigate"],
    [data-object-tool="navigate"],
    [data-stair-tool="navigate"]
  ) #modelViewport #house {
    height: clamp(13rem, 36dvh, 16rem);
    min-height: 0;
  }

  /* The 900 x 600 plan is width-limited on phones. A 54dvh SVG therefore
     adds vertical whitespace without enlarging the drawing, pushing its lower
     handles behind the fixed task dock. Fit the focused canvas to its natural
     phone rendering height; short landscape retains the right-dock layout. */
  body[data-app-screen="editor"][data-target-editor-kind="stair"]:not([data-stair-tool="navigate"])
    #modelViewport #house {
    height: clamp(15rem, 30dvh, 18rem);
  }
}

/* Bound every portrait task canvas to its natural phone rendering height so
   world-scaled opening, object, room and stair handles retain a 44px-class
   physical target while the workbench follows in document flow. */
@media (max-width: 900px) and (orientation: portrait) {
  body[data-app-screen="editor"][data-target-editor-active="true"]:is(
    [data-room-tool]:not([data-room-tool="navigate"]),
    [data-opening-tool]:not([data-opening-tool="navigate"]),
    [data-object-tool]:not([data-object-tool="navigate"]),
    [data-stair-tool]:not([data-stair-tool="navigate"])
  )
    #modelViewport #house {
    height: clamp(11rem, 30dvh, 18rem);
  }
}

/* Keep the independent navigator in two complete four-action rows for every
   mobile target task. This retains all 44px targets without the hidden eighth
   action and horizontal toolbar scrolling introduced when Move was added. */
@media (max-width: 900px) {
  /* Keep the two journey controls that remain visible for a selected target
     in the same compact grid as the Structure/Contents switch. */
  body[data-app-screen="editor"][data-target-editor-active="true"] .plan-global-toolkit {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  body[data-app-screen="editor"][data-target-editor-active="true"]
    .plan-global-toolkit > .plan-edit-scope {
    grid-column: span 2;
  }
  /* Placement already names the target, current wall and usable range in three
     compact rows. Tighten only those row gaps so both 44 px wall nudges remain
     wholly inside a 320 × 672 viewport instead of leaving a 2 px overhang. */
  body[data-app-screen="editor"][data-object-tool="placement"]
    .object-wall-position-controls {
    gap: 0.2rem;
  }
  body[data-app-screen="editor"][data-target-editor-active="true"]:is(
    [data-room-tool]:not([data-room-tool="navigate"]),
    [data-opening-tool]:not([data-opening-tool="navigate"]),
    [data-object-tool]:not([data-object-tool="navigate"]),
    [data-stair-tool]:not([data-stair-tool="navigate"])
  )
    .plan-viewport-controls {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    justify-content: stretch;
    align-items: stretch;
    gap: 0.25rem;
    margin-top: 0.2rem;
    padding: 0.2rem;
    overflow: visible;
  }
  body[data-app-screen="editor"][data-target-editor-active="true"]:is(
    [data-room-tool]:not([data-room-tool="navigate"]),
    [data-opening-tool]:not([data-opening-tool="navigate"]),
    [data-object-tool]:not([data-object-tool="navigate"]),
    [data-stair-tool]:not([data-stair-tool="navigate"])
  )
    :is(.plan-viewport-zoom, .plan-viewport-pan) {
    display: grid;
    grid-template-columns: repeat(4, minmax(44px, 1fr));
    min-width: 0;
  }
}

/* Portrait plans keep the movement cue, but it does not need a row of its
   own. Pair it with the three 44px zoom actions and let the four directional
   actions own the second row. This applies to both the initial plan and
   focused targets; the later short-landscape rule retains its one-row form. */
@media (max-width: 900px) and (orientation: portrait) {
  body[data-app-screen="editor"] #modelViewport .plan-viewport-controls {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }
  body[data-app-screen="editor"] #modelViewport .plan-viewport-drag {
    grid-column: 1;
    grid-row: 1;
    justify-content: flex-start;
    min-width: 0;
  }
  body[data-app-screen="editor"] #modelViewport .plan-viewport-hint {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
    padding-inline: 0.25rem;
    text-align: left;
  }
  body[data-app-screen="editor"] #modelViewport .plan-viewport-zoom {
    grid-column: 2;
    grid-row: 1;
    grid-template-columns: repeat(3, 44px);
  }
  body[data-app-screen="editor"] #modelViewport .plan-viewport-pan {
    grid-column: 1 / -1;
    grid-row: 2;
  }
}

@media (max-width: 360px) {
  .plan-tool strong { font-size: 0.56rem; }
  /* Seven room choices read cleanly as four primary manipulation tasks followed
     by Details, Add and Close. The default five-column strip compresses Move
     and Walls into three-line labels while wasting most of the second row. */
  body[data-app-screen="editor"][data-target-editor-kind="room"][data-room-tool="navigate"]
    .room-tool-strip {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  /* The selected-object chooser has exactly six useful actions. Give them two
     balanced rows instead of forcing five into the first row and stranding
     the saved Close action alone in a narrow second-row cell. Active object
     tasks retain their compact four-action strip above. */
  body[data-app-screen="editor"][data-target-editor-kind="object"][data-object-tool="navigate"]
    .object-tool-strip {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  /* The saved-home identity is the primary dashboard control. Keep its full
     selector width on narrow phones and place Help/Delete beneath it instead
     of truncating the selected name to a few characters. */
  .home-title-control {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .home-title-control select {
    grid-column: 1 / -1;
    padding-inline: 0.6rem 1.4rem;
    font-size: 1rem;
  }
  .home-title-control .context-help { justify-self: start; }
  /* Six actions form two complete three-item rows at this width. Keep the
     Editing mode wrapper for its accessible group semantics, but remove its
     decorative nested box so it occupies the two remaining tracks beside
     View instead of spending a padded row of its own. */
  body[data-app-screen="editor"] .plan-global-toolkit {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  body[data-app-screen="editor"] .plan-global-toolkit .plan-edit-scope {
    grid-column: span 2;
    gap: 0.35rem;
    padding: 0;
    border: 0;
    background: transparent;
  }
  body[data-app-screen="editor"] .plan-global-toolkit :is(.plan-tool, .plan-edit-scope .plan-tool) {
    min-height: 44px;
  }
}

/* A compact screen has no safe place for a sheet over the plan. Keep every
   global task in ordinary document flow, just as selected-target workbenches
   are, so the user can scroll between the complete task and its unobstructed
   plan. The later short-landscape rule deliberately replaces this with its
   non-overlapping right rail. */
@media (max-width: 900px) {
  /* These global tasks become ordinary document content, and their plan keeps
     the same plan-before-navigation order as View and selected targets. */
  body[data-app-screen="editor"]:is(
    [data-plan-task="select"],
    [data-plan-task="object"],
    [data-plan-task="room"]
  ) #modelViewport #house {
    grid-row: 1;
  }
  body[data-app-screen="editor"]:is(
    [data-plan-task="select"],
    [data-plan-task="object"],
    [data-plan-task="room"]
  ) #modelViewport .plan-viewport-controls {
    grid-row: 2;
  }
  body[data-app-screen="editor"]:is(
    [data-plan-task="select"],
    [data-plan-task="object"],
    [data-plan-task="room"]
  ) #modelViewport #house3d {
    grid-row: 3;
  }

  /* Three short numeric dimensions remain at least 44 px wide inside the
     phone task panel. Keep them in one row so room creation and its plan can
     share the initial viewport instead of spending three rows on metre values. */
  body[data-app-screen="editor"][data-plan-task="room"]
    #planRoomMenu .plan-room-dimensions {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.35rem;
  }
  body[data-app-screen="editor"][data-plan-task="room"]
    #planRoomMenu .stair-exact-dimension > span {
    font-size: 0.64rem;
    white-space: nowrap;
  }

  body[data-app-screen="editor"]:is(
    [data-plan-task="select"],
    [data-plan-task="object"],
    [data-plan-task="room"],
    [data-plan-task="view"]
  ) .plan-global-toolkit {
    position: static;
    inset: auto;
    max-height: none;
    margin-top: 0.5rem;
    overflow: visible;
  }
  body[data-app-screen="editor"]:is(
    [data-plan-task="select"],
    [data-plan-task="object"],
    [data-plan-task="room"],
    [data-plan-task="view"]
  ) #modelPanel {
    padding-bottom: 0;
  }
  body[data-app-screen="editor"]:is(
    [data-plan-task="select"],
    [data-plan-task="object"],
    [data-plan-task="room"],
    [data-plan-task="view"]
  ) :is(
    .plan-global-task-panel .plan-task-heading,
    #planTargetDoneBtn,
    #planAddConfiguredObjectBtn,
    #planCreateRoomBtn
  ) {
    position: static;
  }
}

@media (max-width: 480px) {
  :is(.stair-opening-nudge-actions, .stair-turn-nudge-actions) {
    grid-template-columns: repeat(4, minmax(44px, 1fr));
  }
  /* Three dimension groups fit the phone row, but two side-by-side 44px
     buttons cannot fit inside each group. Stack each minus/plus pair beneath
     its label so all six controls remain distinct touch targets. */
  .object-dimension-nudge {
    grid-template-columns: minmax(0, 1fr);
  }
  .object-dimension-nudge > .plan-tool-options-title {
    grid-column: 1;
  }
}

/* Short landscape screens have useful horizontal space but very little height.
   A full-width bottom sheet hid the plan while direct-manipulation tasks still
   instructed users to drag it. Dock the active workbench on the right and
   reserve the same width in the model panel, keeping both the plan and every
   scrollable task control reachable. */
@media (max-width: 900px) and (max-height: 500px) and (orientation: landscape) {
  /* The initial plan owns the full landscape width, so its compact cue and
     seven 44 px actions fit in one row. Selected/global tasks reserve a side
     dock and deliberately keep the narrower two-row navigator. */
  body[data-app-screen="editor"][data-plan-task="navigate"]:not([data-target-editor-active="true"])
    #modelViewport .plan-viewport-controls {
    grid-template-columns: minmax(10rem, 1fr) auto auto;
    align-items: center;
  }
  body[data-app-screen="editor"][data-plan-task="navigate"]:not([data-target-editor-active="true"])
    #modelViewport .plan-viewport-drag {
    min-width: 0;
    padding-inline: 0.35rem;
    justify-content: flex-start;
  }
  body[data-app-screen="editor"][data-plan-task="navigate"]:not([data-target-editor-active="true"])
    #modelViewport .plan-viewport-zoom {
    grid-template-columns: repeat(3, 44px);
  }
  body[data-app-screen="editor"][data-plan-task="navigate"]:not([data-target-editor-active="true"])
    #modelViewport .plan-viewport-pan {
    grid-template-columns: repeat(4, 44px);
  }

  body[data-app-screen="editor"]:is(
    [data-plan-task="select"],
    [data-plan-task="object"],
    [data-plan-task="room"],
    [data-plan-task="view"]
  ) .plan-global-toolkit,
  body[data-app-screen="editor"] :is(.room-toolkit, .opening-toolkit, .object-toolkit, .stair-toolkit) {
    position: fixed;
    top: max(0.5rem, env(safe-area-inset-top));
    right: max(0.5rem, env(safe-area-inset-right));
    bottom: max(0.5rem, env(safe-area-inset-bottom));
    left: auto;
    width: min(24rem, 48vw);
    max-height: calc(100dvh - 1rem);
    margin-top: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    z-index: 110;
  }

  body[data-app-screen="editor"][data-target-editor-active="true"]
    :is(.room-tool-strip, .opening-tool-strip, .object-tool-strip, .stair-tool-strip) {
    position: sticky;
    top: 0;
    z-index: 4;
  }

  body[data-app-screen="editor"][data-target-editor-kind="stair"]:not([data-stair-tool="navigate"])
    .stair-toolkit {
    max-height: calc(100dvh - 1rem);
  }

  body[data-app-screen="editor"]:is(
    [data-plan-task="select"],
    [data-plan-task="object"],
    [data-plan-task="room"],
    [data-plan-task="view"]
  ) #modelPanel,
  body[data-app-screen="editor"][data-target-editor-active="true"] #modelPanel {
    padding-right: calc(min(24rem, 48vw) + 1rem);
    padding-bottom: 0;
  }
}

/* Mobile editing keeps only the controls needed for the current task. Direct
   plan targets own selection, the floor is always available in the primary
   toolbar, and one Recentre action replaces the oversized navigation block.
   Sideways plan drags and vertical page swipes remain available directly. */
@media (max-width: 900px) {
  body[data-app-screen="editor"] .top-bar .brand-block,
  body[data-app-screen="editor"] .top-bar #authControls,
  body[data-app-screen="editor"] .top-bar .calculation-toolbar-item,
  body[data-app-screen="editor"] .top-bar .calculation-lifecycle-wrap {
    display: none !important;
  }
  body[data-app-screen="editor"] .top-bar {
    min-height: 0;
    padding: 0.3rem 0.5rem;
  }
  body[data-app-screen="editor"] .top-bar .top-right,
  body[data-app-screen="editor"] .top-bar .active-home-status {
    width: 100%;
  }
  body[data-app-screen="editor"] .top-bar .active-home-status {
    justify-content: space-between;
  }
  body[data-app-screen="editor"] #planTargetBtn {
    display: none !important;
  }
  body[data-app-screen="editor"] .plan-floor-picker {
    display: grid;
    min-width: 0;
    min-height: 44px;
    align-content: center;
    gap: 0.1rem;
    color: #334155;
    font-size: 0.56rem;
    font-weight: 750;
    text-align: center;
  }
  body[data-app-screen="editor"] .plan-floor-picker select {
    width: 100%;
    min-width: 0;
    min-height: 25px;
    padding: 0 0.15rem;
    border: 1px solid #cbd5e1;
    border-radius: 0.35rem;
    background: #fff;
    font: inherit;
    text-align: center;
  }
  body[data-app-screen="editor"] #modelViewport .plan-viewport-controls {
    display: block;
    margin-top: 0.2rem;
    padding: 0;
    border: 0;
    background: transparent;
  }
  body[data-app-screen="editor"] #modelViewport .plan-viewport-drag,
  body[data-app-screen="editor"] #modelViewport #planZoomOutBtn,
  body[data-app-screen="editor"] #modelViewport #planZoomInBtn,
  body[data-app-screen="editor"] #modelViewport .plan-viewport-pan {
    display: none !important;
  }
  body[data-app-screen="editor"] #modelViewport .plan-viewport-zoom {
    display: block;
  }
  body[data-app-screen="editor"] #modelViewport #planFitBtn {
    display: block;
    width: 100%;
    min-height: 44px;
  }
}