/* Shared expansion contract. Keep visualization state and canvases in place. */
.visualization-heading { display:flex; align-items:center; gap:12px; margin-bottom:24px; }
.visualization-heading > :first-child { flex:1; min-width:0; margin:0; }
.visualization-heading .building-intro { margin:0; }
.building-page .visualization-heading { margin-top:30px; }
.visualization-heading .dashboard-title { align-items:center; gap:8px 12px; }
.population-page button.visualization-fullscreen-toggle,
button.visualization-fullscreen-toggle {
  display:inline-flex; align-items:center; justify-content:center; flex:none;
  width:44px; height:44px; min-width:44px; min-height:44px; padding:0;
  border:1px solid var(--line); border-radius:var(--radius-control,14px);
  background:var(--surface); color:var(--muted); cursor:pointer;
}
button.visualization-fullscreen-toggle[hidden] { display:none; }
button.visualization-fullscreen-toggle:hover { color:var(--ink); }
button.visualization-fullscreen-toggle:focus-visible { outline:2px solid var(--focus-ring); outline-offset:3px; }
.visualization-fullscreen-toggle svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
[data-visualization-fullscreen].visualization-expanded {
  --fullscreen-bg:#080e18;
  position:fixed; inset:0; z-index:2000; width:100%; max-width:none;
  height:100%; height:100dvh; max-height:none; margin:0;
  overflow:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch;
  padding:0 max(20px,env(safe-area-inset-right)) max(24px,env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left));
  background:radial-gradient(ellipse at 50% 0,#16243b88,transparent 70%),var(--fullscreen-bg);
  color:var(--ink); isolation:isolate;
}
[data-theme=water] [data-visualization-fullscreen].visualization-expanded {
  --fullscreen-bg:#d5eeef;
  background:radial-gradient(ellipse at 50% 0,#ffffffaa,transparent 70%),var(--fullscreen-bg);
}
.visualization-expanded > .visualization-heading {
  position:sticky; top:0; z-index:50; margin:0 0 16px;
  padding: max(12px,env(safe-area-inset-top)) 0 12px;
  background:var(--fullscreen-bg); border-bottom:1px solid var(--line);
}
.visualization-expanded .visualization-heading h1 { font-size:clamp(20px,2.3vw,30px); }
.visualization-expanded .model-stage { position:static; backdrop-filter:none; -webkit-backdrop-filter:none; }
.visualization-expanded .model-surface { height:calc(100dvh - 230px); min-height:300px; }
.visualization-expanded .building-picker { align-self:start; }
.visualization-expanded .model-note { margin-bottom:0; }
.visualization-expanded .help-popover { z-index:100; }
.visualization-expanded .chart-tooltip { z-index:90; }
.visualization-expanded::backdrop { background:var(--fullscreen-bg,#080e18); }
@media (max-width:700px) {
  .visualization-heading { gap:8px; margin-bottom:16px; align-items:flex-start; }
  .visualization-heading .dashboard-title h1 { font-size:24px; }
  .visualization-heading .visualization-fullscreen-toggle { margin-top:0; }
  [data-visualization-fullscreen].visualization-expanded { padding-inline:max(12px,env(safe-area-inset-left)) max(12px,env(safe-area-inset-right)); }
  .visualization-expanded .visualization-heading { align-items:center; }
  .visualization-expanded .visualization-heading h1 { font-size:20px; }
  .visualization-expanded .model-surface { height:calc(100dvh - 280px); min-height:280px; }
}
@media (max-height:500px) and (orientation:landscape) {
  .visualization-expanded .model-surface { height:70dvh; min-height:220px; }
}

/* Leave more of a short screen to the model, while retaining its selector. */
.visualization-expanded .building-intro .eyebrow { display:none; }
.visualization-expanded .building-layout > .model-choice { padding:0; border:0; background:none; box-shadow:none; backdrop-filter:none; }
.visualization-expanded .stage-heading { padding:14px 18px 0; }
.visualization-expanded .stage-heading h2 { margin:5px 0 10px; font-size:22px; }
.visualization-expanded .gesture-hint { padding:8px 16px 14px; }
@media (min-width:700px) and (max-width:900px) and (max-height:600px) {
  .visualization-expanded .building-layout { grid-template-columns:minmax(0,1fr) 220px; gap:16px; align-items:start; }
  .visualization-expanded .building-layout > .model-choice { grid-column:2; grid-row:1; }
  .visualization-expanded .model-stage { grid-column:1; grid-row:1 / span 2; }
  .visualization-expanded .building-picker { grid-column:2; grid-row:2; padding:16px; }
  .visualization-expanded .model-surface { height:calc(100dvh - 205px); min-height:200px; }
}

/* 3D entry belongs to the scene; its exit stays reachable while scrolling. */
.stage-heading > :first-child { min-width:0; }
.stage-view-actions { display:flex; align-items:center; gap:8px; flex:none; }
.stage-view-actions .orbit-badge { width:44px; height:44px; border-radius:var(--radius-control,14px); }
.visualization-expanded:has(.stage-view-actions) > .visualization-heading { padding-right:60px; min-height:69px; }
.visualization-expanded .stage-view-actions .visualization-fullscreen-toggle {
  position:fixed; top:max(12px,env(safe-area-inset-top));
  right:max(20px,env(safe-area-inset-right)); z-index:60;
}