/* The model and its controls occupy separate measured areas. The renderer never
   has to guess which part of its canvas is obscured by buttons. */
.home-view {
  --model-surface: var(--surface);
  --model-edge: var(--line);
  --model-skeleton: color-mix(in srgb, var(--ink) 11%, var(--surface));
  --model-skeleton-side: color-mix(in srgb, var(--ink) 18%, var(--surface));
  display: flex;
  flex-direction: column;
  isolation: isolate;
  overflow: hidden;
  min-height: 350px;
  border: 1px solid var(--model-edge);
  border-radius: 24px;
  background: radial-gradient(ellipse at 50% 58%, var(--surface), var(--ground) 82%);
}
.home-model-stage { position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden; }
.home-model-stage::after {
  content: ""; position: absolute; z-index: -1; left: 18%; right: 18%; bottom: 10%; height: 8%;
  border-radius: 50%; background: radial-gradient(ellipse, color-mix(in srgb, var(--ink) 9%, transparent), transparent 70%);
  pointer-events: none;
}
.home-model-controls {
  flex: none; display: grid; gap: 8px; padding: 10px 14px;
  border-top: 1px solid var(--model-edge);
  background: color-mix(in srgb, var(--surface) 92%, transparent);
}
/* Preserve the action rail's height while loading, with no hidden focus targets. */
.home-model-controls[hidden] { display: grid !important; visibility: hidden; }
.home-view.still .home-model-controls { display: none !important; }
.home-model-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 8px; min-height: 44px; }
.home-model-actions .see-inside, .home-model-actions .flat-alone {
  position: static; min-height: 44px; max-width: 100%; font-size: 13px; padding-inline: 16px;
}
.home-model-actions .flat-alone { margin-inline-end: auto; }
.home-model-controls .floor-bar {
  position: static; transform: none; max-width: 100%; justify-self: center;
  background: var(--model-surface); box-shadow: 0 0 0 1px var(--model-edge); margin: 0;
}
.home-model-controls .home-view-tag {
  position: static; margin: 0; max-width: 100%; padding: 0 4px; border-radius: 0;
  text-align: center; font-size: 12px; line-height: 1.45; background: none; box-shadow: none;
}
.home-model-stage .home-still { display: block; }
.home-model-stage .home-preview { opacity: .08; filter: blur(9px); transform: scale(1.05); }
.home-model-stage .home-view-loading, .district-viewport .model-loading {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 28px; padding: 24px; background: color-mix(in srgb, var(--surface) 88%, transparent);
  pointer-events: none;
}
.model-loading-label { margin: 0; color: var(--ink-2); font-size: 13px; letter-spacing: .025em; text-align: center; }
.model-skeleton { position: relative; width: min(78%, 280px); aspect-ratio: 1.5; }
.model-skeleton-base {
  position: absolute; inset: 42% 0 0; border-radius: 50%;
  background: var(--model-skeleton); border: 1px solid var(--model-edge);
  box-shadow: 0 7px 0 var(--model-skeleton-side), 0 15px 18px color-mix(in srgb, var(--ink) 5%, transparent);
}
.model-skeleton-house { position: absolute; left: 22%; right: 20%; top: 8%; bottom: 30%; }
.model-skeleton-front {
  position: absolute; inset: 23% 0 0 27%; display: grid; grid-template-columns: 1fr 1fr; gap: 12%; padding: 14%;
  transform: skewY(-12deg); transform-origin: top left;
  background: linear-gradient(105deg, var(--model-skeleton) 30%, color-mix(in srgb, var(--surface) 86%, white) 50%, var(--model-skeleton) 70%);
  background-size: 240% 100%; border: 1px solid var(--model-edge);
  animation: model-skeleton-shimmer 2.2s ease-in-out infinite;
}
.model-skeleton-side {
  position: absolute; left: 0; top: 9%; width: 27%; height: 77%;
  transform: skewY(24deg); transform-origin: top right; background: var(--model-skeleton-side); border: 1px solid var(--model-edge);
}
.model-skeleton-roof {
  position: absolute; left: 0; right: 0; top: -10%; height: 34%;
  clip-path: polygon(0 41%, 73% 0, 100% 58%, 27% 100%); background: var(--model-skeleton);
}
.model-skeleton-window, .model-skeleton-door { background: var(--model-skeleton-side); border-radius: 1px; opacity: .65; }
.model-skeleton-door { transform: translateY(24%); }
@keyframes model-skeleton-shimmer { 0%, 100% { background-position: 100% 0; } 50% { background-position: 0 0; } }
@media (max-width: 899px) {
  .home-view { margin-inline: 0; height: clamp(360px, 59dvh, 540px); }
}
@media (max-width: 380px) {
  .home-model-controls { padding: 8px; }
  .home-model-actions .see-inside, .home-model-actions .flat-alone { padding-inline: 11px; font-size: 12px; }
  .home-model-controls .floor-pill { padding-inline: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .model-skeleton-front { animation: none; }
  .home-view .viewer-canvas { transition: none; }
}

.district-viewport.is-loading { visibility: visible; }
.district-viewport {
  --model-edge: var(--line);
  --model-skeleton: color-mix(in srgb, var(--ink) 11%, var(--surface));
  --model-skeleton-side: color-mix(in srgb, var(--ink) 18%, var(--surface));
}
.district-viewport.is-loading .district-canvas { visibility: hidden; }

.district-figure:has(.district-viewport.is-live) .district-image-tag { display: none; }